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

apps/meteor/client/navbar/NavBarPagesGroup/NavBarItemCreateNew.tsx

@@ -0,0 +1,18 @@
+import { SidebarAction } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCreateNewMenu } from './hooks/useCreateNewMenu';
+
+type CreateRoomProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const NavBarItemCreateNew = (props: CreateRoomProps) => {
+	const { t } = useTranslation();
+
+	const sections = useCreateNewMenu();
+
+	return <GenericMenu icon='plus' sections={sections} title={t('Create_new')} is={SidebarAction} {...props} />;
+};
+
+export default NavBarItemCreateNew;

apps/meteor/client/navbar/NavBarPagesGroup/NavBarItemDirectoryPage.tsx

@@ -0,0 +1,28 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useRouter, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+
+export type NavBarItemDirectoryPageProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const NavBarItemDirectoryPage = (props: NavBarItemDirectoryPageProps) => {
+	const router = useRouter();
+	const handleDirectory = useStableCallback(() => {
+		router.navigate('/directory');
+	});
+	const currentRoute = useCurrentRoutePath();
+
+	const directoryRoute = currentRoute?.includes('/directory');
+
+	return (
+		<NavBarItem
+			{...props}
+			icon='notebook-hashtag'
+			onClick={handleDirectory}
+			aria-current={directoryRoute ? 'page' : undefined}
+			pressed={directoryRoute}
+		/>
+	);
+};
+
+export default NavBarItemDirectoryPage;

apps/meteor/client/navbar/NavBarPagesGroup/NavBarItemHomePage.tsx

@@ -0,0 +1,25 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useRouter, useLayout, useSetting, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+
+export type NavBarItemHomePageProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const NavBarItemHomePage = (props: NavBarItemHomePageProps) => {
+	const router = useRouter();
+	const { sidebar } = useLayout();
+	const showHome = useSetting('Layout_Show_Home_Button');
+	const handleHome = useStableCallback(() => {
+		sidebar.toggle();
+		router.navigate('/home');
+	});
+	const currentRoute = useCurrentRoutePath();
+
+	const homeRoute = currentRoute?.includes('/home');
+
+	return showHome ? (
+		<NavBarItem {...props} icon='home' onClick={handleHome} aria-current={homeRoute ? 'page' : undefined} pressed={homeRoute} />
+	) : null;
+};
+
+export default NavBarItemHomePage;

apps/meteor/client/navbar/NavBarPagesGroup/NavBarItemMarketPlaceMenu.tsx

@@ -0,0 +1,30 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useCurrentRoutePath } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useMarketPlaceMenu } from './hooks/useMarketPlaceMenu';
+
+export type NavBarItemMarketPlaceMenuProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const NavBarItemMarketPlaceMenu = (props: NavBarItemMarketPlaceMenuProps) => {
+	const { t } = useTranslation();
+	const sections = useMarketPlaceMenu();
+
+	const currentRoute = useCurrentRoutePath();
+
+	return (
+		<GenericMenu
+			sections={sections}
+			title={t('Marketplace')}
+			is={NavBarItem}
+			placement='bottom-start'
+			icon='store'
+			pressed={currentRoute?.includes('/marketplace')}
+			{...props}
+		/>
+	);
+};
+
+export default NavBarItemMarketPlaceMenu;

apps/meteor/client/navbar/NavBarPagesGroup/NavBarItemSort.tsx

@@ -0,0 +1,18 @@
+import { SidebarAction } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSortMenu } from './hooks/useSortMenu';
+
+export type NavBarItemSortProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const NavBarItemSort = (props: NavBarItemSortProps) => {
+	const { t } = useTranslation();
+
+	const sections = useSortMenu();
+
+	return <GenericMenu icon='sort' sections={sections} title={t('Display')} selectionMode='multiple' is={SidebarAction} {...props} />;
+};
+
+export default NavBarItemSort;

apps/meteor/client/navbar/NavBarPagesGroup/NavBarPagesGroup.tsx

@@ -0,0 +1,36 @@
+import { NavBarGroup } from '@rocket.chat/fuselage';
+import { useLayout, usePermission } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import NavBarItemCreateNew from './NavBarItemCreateNew';
+import NavBarItemDirectoryPage from './NavBarItemDirectoryPage';
+import NavBarItemHomePage from './NavBarItemHomePage';
+import NavBarItemMarketPlaceMenu from './NavBarItemMarketPlaceMenu';
+import NavBarItemSort from './NavBarItemSort';
+import NavBarPagesStackMenu from './NavBarPagesStackMenu';
+
+const NavBarPagesGroup = () => {
+	const { t } = useTranslation();
+	const { isTablet, isMobile } = useLayout();
+
+	const hasManageAppsPermission = usePermission('manage-apps');
+	const hasAccessMarketplacePermission = usePermission('access-marketplace');
+	const showMarketplace = hasAccessMarketplacePermission || hasManageAppsPermission;
+
+	return (
+		<NavBarGroup aria-label={t('Pages_and_actions')}>
+			{isTablet && <NavBarPagesStackMenu />}
+			{!isTablet && (
+				<>
+					<NavBarItemHomePage title={t('Home')} />
+					<NavBarItemDirectoryPage title={t('Directory')} />
+				</>
+			)}
+			{showMarketplace && !isMobile && <NavBarItemMarketPlaceMenu />}
+			{!isMobile && <NavBarItemSort />}
+			<NavBarItemCreateNew />
+		</NavBarGroup>
+	);
+};
+
+export default NavBarPagesGroup;

apps/meteor/client/navbar/NavBarPagesGroup/NavBarPagesStackMenu.tsx

@@ -0,0 +1,46 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useCurrentRoutePath, useLayout, useRouter, useSetting } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type NavBarPagesStackMenuProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const NavBarPagesStackMenu = (props: NavBarPagesStackMenuProps) => {
+	const { t } = useTranslation();
+
+	const showHome = useSetting('Layout_Show_Home_Button');
+	const { sidebar } = useLayout();
+	const router = useRouter();
+
+	const handleGoToHome = useStableCallback(() => {
+		sidebar.toggle();
+		router.navigate('/home');
+	});
+
+	const currentRoute = useCurrentRoutePath();
+	const pressed = currentRoute?.includes('/directory') || currentRoute?.includes('/home');
+
+	const items = [
+		showHome && {
+			id: 'home',
+			icon: 'home',
+			content: t('Home'),
+			onClick: handleGoToHome,
+		},
+		{
+			id: 'directory',
+			icon: 'notebook-hashtag',
+			content: t('Directory'),
+			onClick: () => router.navigate('/directory'),
+		},
+	].filter(Boolean) as GenericMenuItemProps[];
+
+	return (
+		<GenericMenu items={items} title={t('Pages')} is={NavBarItem} placement='bottom-start' icon='stack' pressed={pressed} {...props} />
+	);
+};
+
+export default NavBarPagesStackMenu;

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateChannelModal.spec.tsx

@@ -0,0 +1,295 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import CreateChannelModal from './CreateChannelModal';
+import { createFakeLicenseInfo } from '../../../../tests/mocks/data';
+
+jest.mock('../../../lib/rooms/roomCoordinator', () => ({}));
+
+describe('CreateChannelModal', () => {
+	describe('Encryption', () => {
+		it('should render with encryption option disabled and set to off when E2E_Enable=false and E2E_Enabled_Default_PrivateRooms=false', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', false).withSetting('E2E_Enabled_Default_PrivateRooms', false).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Encrypted') as HTMLInputElement;
+			expect(encrypted).toBeInTheDocument();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+		});
+
+		it('should render with encryption option enabled and set to off when E2E_Enable=true and E2E_Enabled_Default_PrivateRooms=false', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', false).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Encrypted') as HTMLInputElement;
+			expect(encrypted).toBeInTheDocument();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeEnabled();
+		});
+
+		it('should render with encryption option disabled and set to off when E2E_Enable=false and E2E_Enabled_Default_PrivateRooms=true', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', false).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Encrypted') as HTMLInputElement;
+			expect(encrypted).toBeInTheDocument();
+
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+		});
+
+		it('should render with encryption option enabled and set to on when E2E_Enable=true and E2E_Enabled_Default_PrivateRooms=True', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Encrypted') as HTMLInputElement;
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeEnabled();
+		});
+
+		it('when Private goes ON → OFF: forces Encrypted OFF and disables it (E2E_Enable=true, E2E_Enabled_Default_PrivateRooms=true)', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Encrypted') as HTMLInputElement;
+			const priv = screen.getByLabelText('Private') as HTMLInputElement;
+
+			// initial: private=true, encrypted ON and enabled
+			expect(priv).toBeChecked();
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeEnabled();
+
+			// Private ON -> OFF: encrypted must become OFF and disabled
+			await userEvent.click(priv);
+			expect(priv).not.toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+		});
+
+		it('when Private goes OFF → ON: keeps Encrypted OFF but re-enables it (E2E_Enable=true, E2E_Enabled_Default_PrivateRooms=true)', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Encrypted') as HTMLInputElement;
+			const priv = screen.getByLabelText('Private') as HTMLInputElement;
+
+			// turn private OFF to simulate user path from non-private
+			await userEvent.click(priv);
+			expect(priv).not.toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+
+			// turn private back ON -> encrypted should remain OFF but become enabled
+			await userEvent.click(priv);
+			expect(priv).toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeEnabled();
+		});
+
+		it('private room: toggling Broadcast on/off does not change or disable Encrypted', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Encrypted') as HTMLInputElement;
+			const broadcast = screen.getByLabelText('Broadcast') as HTMLInputElement;
+			const priv = screen.getByLabelText('Private') as HTMLInputElement;
+
+			expect(priv).toBeChecked();
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeEnabled();
+			expect(broadcast).not.toBeChecked();
+
+			// Broadcast: OFF -> ON (Encrypted unchanged + enabled)
+			await userEvent.click(broadcast);
+			expect(broadcast).toBeChecked();
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeEnabled();
+
+			// Broadcast: ON -> OFF (Encrypted unchanged + enabled)
+			await userEvent.click(broadcast);
+			expect(broadcast).not.toBeChecked();
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeEnabled();
+
+			// User can still toggle Encrypted freely while Broadcast is OFF
+			await userEvent.click(encrypted);
+			expect(encrypted).not.toBeChecked();
+
+			// User can still toggle Encrypted freely while Broadcast is ON
+			await userEvent.click(broadcast);
+			expect(broadcast).toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeEnabled();
+		});
+
+		it('non-private room: Encrypted remains OFF and disabled regardless of Broadcast state', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Encrypted') as HTMLInputElement;
+			const broadcast = screen.getByLabelText('Broadcast') as HTMLInputElement;
+			const priv = screen.getByLabelText('Private') as HTMLInputElement;
+
+			// Switch to non-private
+			await userEvent.click(priv);
+			expect(priv).not.toBeChecked();
+
+			// Encrypted must be OFF + disabled (non-private cannot be encrypted)
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+
+			// Broadcast: OFF -> ON (Encrypted stays OFF + disabled)
+			await userEvent.click(broadcast);
+			expect(broadcast).toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+
+			// Broadcast: ON -> OFF (Encrypted still OFF + disabled)
+			await userEvent.click(broadcast);
+			expect(broadcast).not.toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+		});
+
+		it('should render a private channel with encryption checked and disabled for changes when private room encryption is forced', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Force_Encryption_For_Private_Rooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Encrypted') as HTMLInputElement;
+			const priv = screen.getByLabelText('Private') as HTMLInputElement;
+
+			// private by default: encrypted is forced ON and cannot be changed
+			expect(priv).toBeChecked();
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeDisabled();
+
+			// Private ON -> OFF: encrypted turns OFF and stays disabled (public rooms cannot be encrypted)
+			await userEvent.click(priv);
+			expect(priv).not.toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+
+			// Private OFF -> ON: encryption is forced back ON and remains disabled
+			await userEvent.click(priv);
+			expect(priv).toBeChecked();
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeDisabled();
+		});
+	});
+
+	describe('Federation', () => {
+		it('should render with federated option disabled when user lacks license module', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot().build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+			const federated = screen.getByLabelText('Federation_Matrix_Federated');
+			expect(federated).toHaveAccessibleDescription('error-this-is-a-premium-feature');
+			expect(federated).toBeInTheDocument();
+			expect(federated).not.toBeChecked();
+			expect(federated).toBeDisabled();
+		});
+
+		it('should render with federated option disabled if the feature is disabled for workspaces', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot()
+					.withJohnDoe()
+					.withSetting('Federation_Matrix_enabled', false)
+					.withEndpoint(
+						'GET',
+						'/v1/licenses.info',
+						jest.fn().mockImplementation(() => ({
+							license: createFakeLicenseInfo({ activeModules: ['federation'] }),
+						})),
+					)
+					.build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+			const federated = screen.getByLabelText('Federation_Matrix_Federated');
+
+			expect(federated).toBeInTheDocument();
+			expect(federated).not.toBeChecked();
+			expect(federated).toBeDisabled();
+			expect(federated).toHaveAccessibleDescription('Federation_Matrix_Federated_Description_disabled');
+		});
+
+		it('should render with federated option disabled when user lacks permission', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot()
+					.withJohnDoe()
+					.withSetting('Federation_Matrix_enabled', true)
+					.withEndpoint(
+						'GET',
+						'/v1/licenses.info',
+						jest.fn().mockImplementation(() => ({
+							license: createFakeLicenseInfo({ activeModules: ['federation'] }),
+						})),
+					)
+					.build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+			const federated = screen.getByLabelText('Federation_Matrix_Federated');
+
+			expect(federated).toBeInTheDocument();
+			expect(federated).not.toBeChecked();
+			expect(federated).toBeDisabled();
+			expect(federated).toHaveAccessibleDescription('error-not-authorized-federation');
+		});
+
+		it('should render with federated option enabled when user has license module, permission and feature enabled', async () => {
+			render(<CreateChannelModal onClose={() => null} />, {
+				wrapper: mockAppRoot()
+					.withJohnDoe()
+					.withSetting('Federation_Matrix_enabled', true)
+					.withPermission('access-federation')
+					.withEndpoint(
+						'GET',
+						'/v1/licenses.info',
+						jest.fn().mockImplementation(() => ({
+							license: createFakeLicenseInfo({ activeModules: ['federation'] }),
+						})),
+					)
+					.build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+			const federated = screen.getByLabelText('Federation_Matrix_Federated');
+			expect(federated).toBeInTheDocument();
+			expect(federated).not.toBeChecked();
+			expect(federated).not.toBeDisabled();
+			expect(federated).toHaveAccessibleDescription('Federation_Matrix_Federated_Description');
+		});
+	});
+});

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateChannelModal.tsx

@@ -0,0 +1,351 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import {
+	Box,
+	Modal,
+	Button,
+	Icon,
+	Accordion,
+	AccordionItem,
+	ModalHeader,
+	ModalTitle,
+	ModalClose,
+	ModalContent,
+	ModalFooter,
+	ModalFooterControllers,
+} from '@rocket.chat/fuselage';
+import { TextInput, Field, ToggleSwitch, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage-forms';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import {
+	useSetting,
+	useTranslation,
+	useEndpoint,
+	useToastMessageDispatch,
+	usePermissionWithScopedRoles,
+	usePermission,
+} from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import { useId, useEffect, useMemo } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+import { useEncryptedRoomDescription } from './useEncryptedRoomDescription';
+import UserAutoCompleteMultiple from '../../../components/UserAutoCompleteMultiple';
+import { useCreateChannelTypePermission } from '../../../hooks/useCreateChannelTypePermission';
+import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
+import { useIsFederationEnabled } from '../../../hooks/useIsFederationEnabled';
+import { useGoToRoom } from '../../../views/room/hooks/useGoToRoom';
+
+export type CreateChannelModalProps = {
+	teamId?: string;
+	mainRoom?: IRoom;
+	onClose: () => void;
+	reload?: () => void;
+	onSuccess?: (rid: string) => void | Promise<void>;
+};
+
+type CreateChannelModalPayload = {
+	name: string;
+	isPrivate: boolean;
+	topic?: string;
+	members: string[];
+	readOnly: boolean;
+	encrypted: boolean;
+	broadcast: boolean;
+	federated: boolean;
+};
+
+const getFederationHintKey = (federationModule: boolean, featureToggle: boolean, federationAccessPermission: boolean): TranslationKey => {
+	if (!federationModule) {
+		return 'error-this-is-a-premium-feature';
+	}
+
+	if (!featureToggle) {
+		return 'Federation_Matrix_Federated_Description_disabled';
+	}
+
+	if (!federationAccessPermission) {
+		return 'error-not-authorized-federation';
+	}
+
+	return 'Federation_Matrix_Federated_Description';
+};
+
+const hasExternalMembers = (members: string[]): boolean => members.some((member) => member.startsWith('@'));
+
+const CreateChannelModal = ({ teamId = '', mainRoom, onClose, reload, onSuccess }: CreateChannelModalProps) => {
+	const t = useTranslation();
+	const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']);
+	const e2eEnabled = useSetting('E2E_Enable');
+	const namesValidation = useSetting('UTF8_Channel_Names_Validation');
+	const allowSpecialNames = useSetting('UI_Allow_room_names_with_special_chars');
+	const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms') && e2eEnabled;
+	const e2eEnforcedForPrivate = Boolean(useSetting('E2E_Force_Encryption_For_Private_Rooms')) && Boolean(e2eEnabled);
+
+	const getEncryptedHint = useEncryptedRoomDescription('channel');
+
+	const channelNameRegex = useMemo(() => new RegExp(`^${namesValidation}$`), [namesValidation]);
+
+	const federationEnabled = useIsFederationEnabled();
+	const { data: federationModule = false } = useHasLicenseModule('federation');
+	const federationAccessPermission = usePermission('access-federation');
+	const canUseFederation = federationModule && federationEnabled && federationAccessPermission;
+	const federationFieldHint = getFederationHintKey(federationModule, federationEnabled, federationAccessPermission);
+
+	const channelNameExists = useEndpoint('GET', '/v1/rooms.nameExists');
+	const createChannel = useEndpoint('POST', '/v1/channels.create');
+	const createPrivateChannel = useEndpoint('POST', '/v1/groups.create');
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const canOnlyCreateOneType = useCreateChannelTypePermission(mainRoom?._id);
+
+	const {
+		formState: { errors },
+		handleSubmit,
+		control,
+		setValue,
+		watch,
+	} = useForm({
+		defaultValues: {
+			members: [],
+			name: '',
+			topic: '',
+			isPrivate: canOnlyCreateOneType ? canOnlyCreateOneType === 'p' : true,
+			readOnly: false,
+			encrypted: Boolean(e2eEnforcedForPrivate || e2eEnabledForPrivateByDefault),
+			broadcast: false,
+			federated: false,
+		},
+	});
+
+	const { isPrivate, broadcast, readOnly, federated, encrypted } = watch();
+
+	useEffect(() => {
+		if (federated) {
+			// if room is federated, it cannot be encrypted or broadcast or readOnly
+			setValue('encrypted', false);
+			setValue('broadcast', false);
+			setValue('readOnly', false);
+		}
+	}, [federated, setValue]);
+
+	useEffect(() => {
+		if (!isPrivate) {
+			setValue('encrypted', false);
+		}
+	}, [isPrivate, setValue]);
+
+	useEffect(() => {
+		if (isPrivate && e2eEnforcedForPrivate && !federated) {
+			setValue('encrypted', true);
+		}
+	}, [isPrivate, e2eEnforcedForPrivate, federated, setValue]);
+
+	useEffect(() => {
+		setValue('readOnly', broadcast);
+	}, [broadcast, setValue]);
+
+	const validateChannelName = async (name: string): Promise<string | undefined> => {
+		if (!name) {
+			return;
+		}
+
+		if (!allowSpecialNames && !channelNameRegex.test(name)) {
+			return t('Name_cannot_have_special_characters');
+		}
+
+		const { exists } = await channelNameExists({ roomName: name });
+		if (exists) {
+			return t('Channel_already_exist', { channelName: name });
+		}
+	};
+
+	const goToRoom = useGoToRoom();
+
+	const handleCreateChannel = async ({ name, members, readOnly, topic, broadcast, encrypted, federated }: CreateChannelModalPayload) => {
+		let roomData;
+		const params = {
+			name,
+			members,
+			readOnly,
+			extraData: {
+				topic,
+				broadcast,
+				encrypted,
+				...(federated && { federated }),
+				...(teamId && { teamId }),
+			},
+		};
+
+		let rid: string;
+		try {
+			if (isPrivate) {
+				roomData = await createPrivateChannel(params);
+				rid = roomData.group._id;
+				if (!teamId) goToRoom(roomData.group._id);
+			} else {
+				roomData = await createChannel(params);
+				rid = roomData.channel._id;
+				if (!teamId) goToRoom(roomData.channel._id);
+			}
+
+			dispatchToastMessage({ type: 'success', message: t('Room_has_been_created') });
+			void onSuccess?.(rid);
+			reload?.();
+			onClose();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	const e2eDisabled = useMemo<boolean>(
+		() => !isPrivate || Boolean(!e2eEnabled) || federated || (e2eEnforcedForPrivate && isPrivate),
+		[e2eEnabled, federated, isPrivate, e2eEnforcedForPrivate],
+	);
+
+	const createChannelFormId = useId();
+
+	return (
+		<Modal
+			aria-labelledby={`${createChannelFormId}-title`}
+			wrapperFunction={(props: ComponentProps<typeof Box>) => (
+				<Box is='form' id={createChannelFormId} onSubmit={handleSubmit(handleCreateChannel)} {...props} />
+			)}
+		>
+			<ModalHeader>
+				<ModalTitle id={`${createChannelFormId}-title`}>{t('Create_channel')}</ModalTitle>
+				<ModalClose tabIndex={-1} title={t('Close')} onClick={onClose} />
+			</ModalHeader>
+			<ModalContent marginBlockEnd={2}>
+				<FieldGroup marginBlockEnd={24}>
+					<Field>
+						<FieldLabel required>{t('Name')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								control={control}
+								name='name'
+								rules={{
+									required: t('Required_field', { field: t('Name') }),
+									validate: (value) => validateChannelName(value),
+								}}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										error={errors.name?.message}
+										endAddon={<Icon name={isPrivate ? 'hashtag-lock' : 'hashtag'} size='x20' />}
+										aria-required='true'
+									/>
+								)}
+							/>
+						</FieldRow>
+						{errors.name && <FieldError>{errors.name.message}</FieldError>}
+						{!allowSpecialNames && <FieldHint>{t('No_spaces_or_special_characters')}</FieldHint>}
+					</Field>
+					<Field>
+						<FieldLabel>{t('Topic')}</FieldLabel>
+						<FieldRow>
+							<Controller control={control} name='topic' render={({ field }) => <TextInput {...field} />} />
+						</FieldRow>
+						<FieldHint>{t('Displayed_next_to_name')}</FieldHint>
+					</Field>
+					<Field>
+						<FieldLabel>{t('Members')}</FieldLabel>
+						<Controller
+							control={control}
+							name='members'
+							rules={{
+								validate: (members) =>
+									!federated && hasExternalMembers(members) ? t('You_cannot_add_external_users_to_non_federated_room') : true,
+							}}
+							render={({ field }) => <UserAutoCompleteMultiple {...field} federated={federated} placeholder={t('Add_people')} />}
+						/>
+						{errors.members && <FieldError>{errors.members.message}</FieldError>}
+					</Field>
+					<Field>
+						<FieldRow>
+							<FieldLabel>{t('Private')}</FieldLabel>
+							<Controller
+								control={control}
+								name='isPrivate'
+								render={({ field: { value, ...field } }) => (
+									<ToggleSwitch
+										{...field}
+										checked={canOnlyCreateOneType ? canOnlyCreateOneType === 'p' : value}
+										disabled={!!canOnlyCreateOneType}
+									/>
+								)}
+							/>
+						</FieldRow>
+						<FieldHint>{isPrivate ? t('People_can_only_join_by_being_invited') : t('Anyone_can_access')}</FieldHint>
+					</Field>
+				</FieldGroup>
+				<Accordion>
+					<AccordionItem title={t('Advanced_settings')}>
+						<FieldGroup>
+							<Box is='h5' fontScale='h5' color='titles-labels'>
+								{t('Security_and_permissions')}
+							</Box>
+							<Field>
+								<FieldRow>
+									<FieldLabel>{t('Federation_Matrix_Federated')}</FieldLabel>
+									<Controller
+										control={control}
+										name='federated'
+										render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} disabled={!canUseFederation} />}
+									/>
+								</FieldRow>
+								<FieldHint>{t(federationFieldHint)}</FieldHint>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel>{t('Encrypted')}</FieldLabel>
+									<Controller
+										control={control}
+										name='encrypted'
+										render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} disabled={e2eDisabled} />}
+									/>
+								</FieldRow>
+								<FieldHint>{getEncryptedHint({ isPrivate, encrypted })}</FieldHint>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel>{t('Read_only')}</FieldLabel>
+									<Controller
+										control={control}
+										name='readOnly'
+										render={({ field: { value, ...field } }) => (
+											<ToggleSwitch {...field} checked={value} disabled={!canSetReadOnly || broadcast || federated} />
+										)}
+									/>
+								</FieldRow>
+								<FieldHint>
+									{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'channel' }) : t('Anyone_can_send_new_messages')}
+								</FieldHint>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel>{t('Broadcast')}</FieldLabel>
+									<Controller
+										control={control}
+										name='broadcast'
+										render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} disabled={!!federated} />}
+									/>
+								</FieldRow>
+								{broadcast && <FieldHint>{t('Broadcast_hint_enabled', { roomType: 'channel' })}</FieldHint>}
+							</Field>
+						</FieldGroup>
+					</AccordionItem>
+				</Accordion>
+			</ModalContent>
+			<ModalFooter>
+				<ModalFooterControllers>
+					<Button onClick={onClose}>{t('Cancel')}</Button>
+					<Button type='submit' primary>
+						{t('Create')}
+					</Button>
+				</ModalFooterControllers>
+			</ModalFooter>
+		</Modal>
+	);
+};
+
+export default CreateChannelModal;

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateDirectMessage.tsx

@@ -0,0 +1,112 @@
+import type { IUser } from '@rocket.chat/core-typings';
+import {
+	Box,
+	Modal,
+	Button,
+	ModalHeader,
+	ModalTitle,
+	ModalClose,
+	ModalContent,
+	ModalFooter,
+	ModalFooterControllers,
+} from '@rocket.chat/fuselage';
+import { FieldGroup, Field, FieldLabel, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage-forms';
+import { useTranslation, useEndpoint, useToastMessageDispatch, useSetting } from '@rocket.chat/ui-contexts';
+import { useMutation } from '@tanstack/react-query';
+import { useId, memo } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+import UserAutoCompleteMultiple from '../../../components/UserAutoCompleteMultiple';
+import { useGoToRoom } from '../../../views/room/hooks/useGoToRoom';
+
+export type CreateDirectMessageProps = { onClose: () => void; onSuccess?: (rid: string) => void | Promise<void> };
+
+const CreateDirectMessage = ({ onClose, onSuccess }: CreateDirectMessageProps) => {
+	const t = useTranslation();
+	const directMaxUsers = useSetting('DirectMesssage_maxUsers', 1);
+	const createDMFormId = useId();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const createDirectAction = useEndpoint('POST', '/v1/dm.create');
+
+	const {
+		control,
+		handleSubmit,
+		formState: { isSubmitting, isValidating, errors },
+	} = useForm({ defaultValues: { users: [] } });
+
+	const goToRoom = useGoToRoom();
+
+	const mutateDirectMessage = useMutation({
+		mutationFn: createDirectAction,
+		onSuccess: ({ room }) => {
+			goToRoom(room.rid);
+			void onSuccess?.(room.rid);
+		},
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSettled: () => {
+			onClose();
+		},
+	});
+
+	const handleCreate = async ({ users }: { users: IUser['username'][] }) => {
+		return mutateDirectMessage.mutateAsync({ usernames: users.join(',') });
+	};
+
+	return (
+		<Modal
+			aria-labelledby={`${createDMFormId}-title`}
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}
+		>
+			<ModalHeader>
+				<ModalTitle id={`${createDMFormId}-title`}>{t('Create_direct_message')}</ModalTitle>
+				<ModalClose tabIndex={-1} onClick={onClose} />
+			</ModalHeader>
+			<ModalContent marginBlockEnd={2}>
+				<FieldGroup>
+					<Field>
+						<FieldLabel>{t('Direct_message_creation_description')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								name='users'
+								rules={{
+									required: t('Direct_message_creation_error'),
+									validate: (users) =>
+										users.length + 1 > directMaxUsers
+											? t('error-direct-message-max-user-exceeded', { maxUsers: directMaxUsers })
+											: undefined,
+								}}
+								control={control}
+								render={({ field: { name, onChange, value, onBlur } }) => (
+									<UserAutoCompleteMultiple
+										name={name}
+										onChange={onChange}
+										value={value}
+										onBlur={onBlur}
+										federated
+										aria-required='true'
+										error={errors.users?.message}
+									/>
+								)}
+							/>
+						</FieldRow>
+						{errors.users && <FieldError>{errors.users.message}</FieldError>}
+						<FieldHint>{t('Direct_message_creation_description_hint')}</FieldHint>
+					</Field>
+				</FieldGroup>
+			</ModalContent>
+			<ModalFooter>
+				<ModalFooterControllers>
+					<Button onClick={onClose}>{t('Cancel')}</Button>
+					<Button loading={isSubmitting || isValidating} type='submit' primary>
+						{t('Create')}
+					</Button>
+				</ModalFooterControllers>
+			</ModalFooter>
+		</Modal>
+	);
+};
+
+export default memo(CreateDirectMessage);

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateTeamModal.spec.tsx

@@ -0,0 +1,273 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import CreateTeamModal from './CreateTeamModal';
+
+jest.mock('../../../lib/rooms/roomCoordinator', () => ({}));
+
+describe('CreateTeamModal', () => {
+	it('should render with encryption option disabled and set to off when E2E_Enable=false and E2E_Enabled_Default_PrivateRooms=false', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().withSetting('E2E_Enable', false).withSetting('E2E_Enabled_Default_PrivateRooms', false).build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+		expect(encrypted).toBeInTheDocument();
+		expect(encrypted).not.toBeChecked();
+		expect(encrypted).toBeDisabled();
+	});
+
+	it('should render with encryption option enabled and set to off when E2E_Enable=true and E2E_Enabled_Default_PrivateRooms=false', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', false).build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+		expect(encrypted).toBeInTheDocument();
+		expect(encrypted).not.toBeChecked();
+		expect(encrypted).toBeEnabled();
+	});
+
+	it('should render with encryption option disabled and set to off when E2E_Enable=false and E2E_Enabled_Default_PrivateRooms=true', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().withSetting('E2E_Enable', false).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+		expect(encrypted).toBeInTheDocument();
+
+		expect(encrypted).not.toBeChecked();
+		expect(encrypted).toBeDisabled();
+	});
+
+	it('should render with encryption option enabled and set to on when E2E_Enable=true and E2E_Enabled_Default_PrivateRooms=True', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+		expect(encrypted).toBeChecked();
+		expect(encrypted).toBeEnabled();
+	});
+
+	it('when Private goes ON → OFF: forces Encrypted OFF and disables it (E2E_Enable=true, E2E_Enabled_Default_PrivateRooms=true)', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+		const priv = screen.getByLabelText('Teams_New_Private_Label') as HTMLInputElement;
+
+		// initial: private=true, encrypted ON and enabled
+		expect(priv).toBeChecked();
+		expect(encrypted).toBeChecked();
+		expect(encrypted).toBeEnabled();
+
+		// Private ON -> OFF: encrypted must become OFF and disabled
+		await userEvent.click(priv);
+		expect(priv).not.toBeChecked();
+		expect(encrypted).not.toBeChecked();
+		expect(encrypted).toBeDisabled();
+	});
+
+	it('when Private goes OFF → ON: keeps Encrypted OFF but re-enables it (E2E_Enable=true, E2E_Enabled_Default_PrivateRooms=true)', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+		const priv = screen.getByLabelText('Teams_New_Private_Label') as HTMLInputElement;
+
+		// turn private OFF to simulate user path from non-private
+		await userEvent.click(priv);
+		expect(priv).not.toBeChecked();
+		expect(encrypted).not.toBeChecked();
+		expect(encrypted).toBeDisabled();
+
+		// turn private back ON -> encrypted should remain OFF but become enabled
+		await userEvent.click(priv);
+		expect(priv).toBeChecked();
+		expect(encrypted).not.toBeChecked();
+		expect(encrypted).toBeEnabled();
+	});
+
+	it('private team: toggling Broadcast on/off does not change or disable Encrypted', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+		const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+		const priv = screen.getByLabelText('Teams_New_Private_Label') as HTMLInputElement;
+
+		expect(priv).toBeChecked();
+		expect(encrypted).toBeChecked();
+		expect(encrypted).toBeEnabled();
+		expect(broadcast).not.toBeChecked();
+
+		// Broadcast: OFF -> ON (Encrypted unchanged + enabled)
+		await userEvent.click(broadcast);
+		expect(broadcast).toBeChecked();
+		expect(encrypted).toBeChecked();
+		expect(encrypted).toBeEnabled();
+
+		// Broadcast: ON -> OFF (Encrypted unchanged + enabled)
+		await userEvent.click(broadcast);
+		expect(broadcast).not.toBeChecked();
+		expect(encrypted).toBeChecked();
+		expect(encrypted).toBeEnabled();
+
+		// User can still toggle Encrypted freely while Broadcast is OFF
+		await userEvent.click(encrypted);
+		expect(encrypted).not.toBeChecked();
+
+		// User can still toggle Encrypted freely while Broadcast is ON
+		await userEvent.click(broadcast);
+		expect(broadcast).toBeChecked();
+		expect(encrypted).not.toBeChecked();
+		expect(encrypted).toBeEnabled();
+	});
+
+	it('non-private team: Encrypted remains OFF and disabled regardless of Broadcast state', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+		const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+		const priv = screen.getByLabelText('Teams_New_Private_Label') as HTMLInputElement;
+
+		// Switch to non-private
+		await userEvent.click(priv);
+		expect(priv).not.toBeChecked();
+
+		// Encrypted must be OFF + disabled (non-private cannot be encrypted)
+		expect(encrypted).not.toBeChecked();
+		expect(encrypted).toBeDisabled();
+
+		// Broadcast: OFF -> ON (Encrypted stays OFF + disabled)
+		await userEvent.click(broadcast);
+		expect(broadcast).toBeChecked();
+		expect(encrypted).not.toBeChecked();
+		expect(encrypted).toBeDisabled();
+
+		// Broadcast: ON -> OFF (Encrypted still OFF + disabled)
+		await userEvent.click(broadcast);
+		expect(broadcast).not.toBeChecked();
+		expect(encrypted).not.toBeChecked();
+		expect(encrypted).toBeDisabled();
+	});
+
+	it('should render a private team with encryption checked and disabled for changes when private room encryption is forced', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Force_Encryption_For_Private_Rooms', true).build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+		const priv = screen.getByLabelText('Teams_New_Private_Label') as HTMLInputElement;
+
+		// private by default: encrypted is forced ON and cannot be changed
+		expect(priv).toBeChecked();
+		expect(encrypted).toBeChecked();
+		expect(encrypted).toBeDisabled();
+
+		// Private ON -> OFF: encrypted turns OFF and stays disabled (public teams cannot be encrypted)
+		await userEvent.click(priv);
+		expect(priv).not.toBeChecked();
+		expect(encrypted).not.toBeChecked();
+		expect(encrypted).toBeDisabled();
+
+		// Private OFF -> ON: encryption is forced back ON and remains disabled
+		await userEvent.click(priv);
+		expect(priv).toBeChecked();
+		expect(encrypted).toBeChecked();
+		expect(encrypted).toBeDisabled();
+	});
+
+	it('should disable and turn on ReadOnly toggle when Broadcast is ON and no set-readonly permission', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+		const readOnly = screen.getByLabelText('Teams_New_Read_only_Label') as HTMLInputElement;
+
+		expect(readOnly).not.toBeChecked();
+
+		// Broadcast: OFF -> ON (ReadOnly stays ON + disabled)
+		await userEvent.click(broadcast);
+		expect(broadcast).toBeChecked();
+		expect(readOnly).toBeChecked();
+		expect(readOnly).toBeDisabled();
+	});
+
+	it('should disable and turn on ReadOnly toggle when Broadcast is ON with set-readonly permission', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().withPermission('set-readonly').build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+		const readOnly = screen.getByLabelText('Teams_New_Read_only_Label') as HTMLInputElement;
+
+		expect(readOnly).not.toBeChecked();
+
+		// Broadcast: OFF -> ON (ReadOnly stays ON + disabled)
+		await userEvent.click(broadcast);
+		expect(broadcast).toBeChecked();
+		expect(readOnly).toBeChecked();
+		expect(readOnly).toBeDisabled();
+	});
+
+	it('should disable and turn off ReadOnly toggle when Broadcast is OFF with no set-readonly permission', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+		const readOnly = screen.getByLabelText('Teams_New_Read_only_Label') as HTMLInputElement;
+
+		expect(broadcast).not.toBeChecked();
+		expect(readOnly).not.toBeChecked();
+		expect(readOnly).toBeDisabled();
+	});
+
+	it('should enable ReadOnly toggle when Broadcast is OFF with set-readonly permission', async () => {
+		render(<CreateTeamModal onClose={() => null} />, {
+			wrapper: mockAppRoot().withPermission('set-readonly').build(),
+		});
+
+		await userEvent.click(screen.getByText('Advanced_settings'));
+
+		const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+		const readOnly = screen.getByLabelText('Teams_New_Read_only_Label') as HTMLInputElement;
+
+		expect(broadcast).not.toBeChecked();
+		expect(readOnly).not.toBeChecked();
+		expect(readOnly).toBeEnabled();
+	});
+});

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateTeamModal.tsx

@@ -0,0 +1,295 @@
+import {
+	Box,
+	Button,
+	Icon,
+	Modal,
+	Accordion,
+	AccordionItem,
+	ModalHeader,
+	ModalTitle,
+	ModalClose,
+	ModalContent,
+	ModalFooter,
+	ModalFooterControllers,
+} from '@rocket.chat/fuselage';
+import { TextInput, ToggleSwitch, Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage-forms';
+import {
+	useEndpoint,
+	usePermission,
+	usePermissionWithScopedRoles,
+	useSetting,
+	useToastMessageDispatch,
+	useTranslation,
+} from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import { useId, memo, useEffect, useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import { useEncryptedRoomDescription } from './useEncryptedRoomDescription';
+import UserAutoCompleteMultiple from '../../../components/UserAutoCompleteMultiple';
+import { useCreateChannelTypePermission } from '../../../hooks/useCreateChannelTypePermission';
+import { useGoToRoom } from '../../../views/room/hooks/useGoToRoom';
+
+type CreateTeamModalInputs = {
+	name: string;
+	topic: string;
+	isPrivate: boolean;
+	readOnly: boolean;
+	encrypted: boolean;
+	broadcast: boolean;
+	members?: string[];
+};
+
+export type CreateTeamModalProps = { onClose: () => void; onSuccess?: (rid: string) => void | Promise<void> };
+
+const CreateTeamModal = ({ onClose, onSuccess }: CreateTeamModalProps) => {
+	const t = useTranslation();
+	const e2eEnabled = useSetting('E2E_Enable');
+	const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms') && e2eEnabled;
+	const e2eEnforcedForPrivate = Boolean(useSetting('E2E_Force_Encryption_For_Private_Rooms')) && Boolean(e2eEnabled);
+	const namesValidation = useSetting('UTF8_Channel_Names_Validation');
+	const allowSpecialNames = useSetting('UI_Allow_room_names_with_special_chars');
+	const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']);
+
+	const dispatchToastMessage = useToastMessageDispatch();
+	const canCreateTeam = usePermission('create-team');
+
+	const checkTeamNameExists = useEndpoint('GET', '/v1/rooms.nameExists');
+	const createTeamAction = useEndpoint('POST', '/v1/teams.create');
+
+	const teamNameRegex = useMemo(() => {
+		if (allowSpecialNames) {
+			return null;
+		}
+
+		return new RegExp(`^${namesValidation}$`);
+	}, [allowSpecialNames, namesValidation]);
+
+	const canOnlyCreateOneType = useCreateChannelTypePermission();
+
+	const validateTeamName = async (name: string): Promise<string | undefined> => {
+		if (!name) {
+			return;
+		}
+
+		if (teamNameRegex && !teamNameRegex?.test(name)) {
+			return t('Name_cannot_have_special_characters');
+		}
+
+		const { exists } = await checkTeamNameExists({ roomName: name });
+		if (exists) {
+			return t('Teams_Errors_Already_exists', { name });
+		}
+	};
+
+	const {
+		control,
+		handleSubmit,
+		setValue,
+		watch,
+		formState: { errors, isSubmitting },
+	} = useForm<CreateTeamModalInputs>({
+		defaultValues: {
+			name: '',
+			topic: '',
+			isPrivate: canOnlyCreateOneType ? canOnlyCreateOneType === 'p' : true,
+			readOnly: false,
+			encrypted: Boolean(e2eEnforcedForPrivate || e2eEnabledForPrivateByDefault),
+			broadcast: false,
+			members: [],
+		},
+	});
+
+	const { isPrivate, broadcast, readOnly, encrypted } = watch();
+
+	useEffect(() => {
+		if (!isPrivate) {
+			setValue('encrypted', false);
+		} else if (e2eEnforcedForPrivate) {
+			setValue('encrypted', true);
+		}
+
+		setValue('readOnly', broadcast);
+	}, [watch, setValue, broadcast, isPrivate, e2eEnforcedForPrivate]);
+
+	const readOnlyDisabled = broadcast || !canSetReadOnly;
+	const canChangeEncrypted = isPrivate && e2eEnabled && !e2eEnforcedForPrivate;
+	const getEncryptedHint = useEncryptedRoomDescription('team');
+
+	const goToRoom = useGoToRoom();
+
+	const handleCreateTeam = async ({
+		name,
+		members,
+		isPrivate,
+		readOnly,
+		topic,
+		broadcast,
+		encrypted,
+	}: CreateTeamModalInputs): Promise<void> => {
+		const params = {
+			name,
+			members,
+			type: isPrivate ? 1 : 0,
+			room: {
+				readOnly,
+				extraData: {
+					topic,
+					broadcast,
+					encrypted,
+				},
+			},
+		};
+
+		try {
+			const { team } = await createTeamAction(params);
+			dispatchToastMessage({ type: 'success', message: t('Team_has_been_created') });
+			goToRoom(team.roomId);
+			void onSuccess?.(team.roomId);
+			onClose();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	const createTeamFormId = useId();
+
+	return (
+		<Modal
+			aria-labelledby={`${createTeamFormId}-title`}
+			wrapperFunction={(props: ComponentProps<typeof Box>) => (
+				<Box is='form' id={createTeamFormId} onSubmit={handleSubmit(handleCreateTeam)} {...props} />
+			)}
+		>
+			<ModalHeader>
+				<ModalTitle id={`${createTeamFormId}-title`}>{t('Teams_New_Title')}</ModalTitle>
+				<ModalClose title={t('Close')} onClick={onClose} tabIndex={-1} />
+			</ModalHeader>
+			<ModalContent marginBlockEnd={2}>
+				<Box fontScale='p2' marginBlockEnd={16}>
+					{t('Teams_new_description')}
+				</Box>
+				<FieldGroup marginBlockEnd={24}>
+					<Field>
+						<FieldLabel required>{t('Teams_New_Name_Label')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								control={control}
+								name='name'
+								rules={{
+									required: t('Required_field', { field: t('Name') }),
+									validate: (value) => validateTeamName(value),
+								}}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										endAddon={<Icon size='x20' name={isPrivate ? 'team-lock' : 'team'} />}
+										error={errors.name?.message}
+										aria-required='true'
+									/>
+								)}
+							/>
+						</FieldRow>
+						{errors?.name && <FieldError>{errors.name.message}</FieldError>}
+						{!allowSpecialNames && <FieldHint>{t('No_spaces_or_special_characters')}</FieldHint>}
+					</Field>
+					<Field>
+						<FieldLabel>{t('Topic')}</FieldLabel>
+						<FieldRow>
+							<Controller control={control} name='topic' render={({ field }) => <TextInput {...field} />} />
+						</FieldRow>
+						<FieldRow>
+							<FieldHint>{t('Displayed_next_to_name')}</FieldHint>
+						</FieldRow>
+					</Field>
+					<Field>
+						<FieldLabel>{t('Teams_New_Add_members_Label')}</FieldLabel>
+						<Controller
+							control={control}
+							name='members'
+							render={({ field: { onChange, value } }) => (
+								<UserAutoCompleteMultiple value={value} onChange={onChange} placeholder={t('Add_people')} />
+							)}
+						/>
+					</Field>
+					<Field>
+						<FieldRow>
+							<FieldLabel>{t('Teams_New_Private_Label')}</FieldLabel>
+							<Controller
+								control={control}
+								name='isPrivate'
+								render={({ field: { onChange, value, ref } }) => (
+									<ToggleSwitch
+										onChange={onChange}
+										checked={canOnlyCreateOneType ? canOnlyCreateOneType === 'p' : value}
+										disabled={!!canOnlyCreateOneType}
+										ref={ref}
+									/>
+								)}
+							/>
+						</FieldRow>
+						<FieldHint>{isPrivate ? t('People_can_only_join_by_being_invited') : t('Anyone_can_access')}</FieldHint>
+					</Field>
+				</FieldGroup>
+				<Accordion>
+					<AccordionItem title={t('Advanced_settings')}>
+						<FieldGroup>
+							<Box is='h5' fontScale='h5' color='titles-labels'>
+								{t('Security_and_permissions')}
+							</Box>
+							<Field>
+								<FieldRow>
+									<FieldLabel>{t('Teams_New_Encrypted_Label')}</FieldLabel>
+									<Controller
+										control={control}
+										name='encrypted'
+										render={({ field: { onChange, value, ref } }) => (
+											<ToggleSwitch disabled={!canChangeEncrypted} onChange={onChange} checked={value} ref={ref} />
+										)}
+									/>
+								</FieldRow>
+								<FieldHint>{getEncryptedHint({ isPrivate, encrypted })}</FieldHint>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel>{t('Teams_New_Read_only_Label')}</FieldLabel>
+									<Controller
+										control={control}
+										name='readOnly'
+										render={({ field: { onChange, value, ref } }) => (
+											<ToggleSwitch disabled={readOnlyDisabled} onChange={onChange} checked={value} ref={ref} />
+										)}
+									/>
+								</FieldRow>
+								<FieldHint>
+									{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'team' }) : t('Anyone_can_send_new_messages')}
+								</FieldHint>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel>{t('Teams_New_Broadcast_Label')}</FieldLabel>
+									<Controller
+										control={control}
+										name='broadcast'
+										render={({ field: { onChange, value, ref } }) => <ToggleSwitch onChange={onChange} checked={value} ref={ref} />}
+									/>
+								</FieldRow>
+								{broadcast && <FieldHint>{t('Teams_New_Broadcast_Description')}</FieldHint>}
+							</Field>
+						</FieldGroup>
+					</AccordionItem>
+				</Accordion>
+			</ModalContent>
+			<ModalFooter>
+				<ModalFooterControllers>
+					<Button onClick={onClose}>{t('Cancel')}</Button>
+					<Button disabled={!canCreateTeam} loading={isSubmitting} type='submit' primary>
+						{t('Create')}
+					</Button>
+				</ModalFooterControllers>
+			</ModalFooter>
+		</Modal>
+	);
+};
+
+export default memo(CreateTeamModal);

apps/meteor/client/navbar/NavBarPagesGroup/actions/useEncryptedRoomDescription.spec.ts

@@ -0,0 +1,127 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { renderHook } from '@testing-library/react';
+
+import { useEncryptedRoomDescription } from './useEncryptedRoomDescription';
+
+const wrapper = mockAppRoot();
+
+describe('useEncryptedRoomDescription', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe.each(['channel', 'team'] as const)('roomType=%s', (roomType) => {
+		it('returns "Not_available_for_this_workspace" when E2E is disabled', () => {
+			const { result } = renderHook(() => useEncryptedRoomDescription(roomType), {
+				wrapper: wrapper.withSetting('E2E_Enable', false).build(),
+			});
+			const describe = result.current;
+
+			expect(describe({ isPrivate: true, encrypted: true })).toBe('Not_available_for_this_workspace');
+		});
+
+		it('returns "Encrypted_not_available" when room is not private and E2E is enabled', () => {
+			const { result } = renderHook(() => useEncryptedRoomDescription(roomType), {
+				wrapper: wrapper.withSetting('E2E_Enable', true).build(),
+			});
+			const describe = result.current;
+
+			expect(describe({ isPrivate: false, encrypted: false })).toBe('Encrypted_not_available');
+		});
+
+		it('returns "Encrypted_messages" when private and encrypted are true and E2E is enabled', () => {
+			const { result } = renderHook(() => useEncryptedRoomDescription(roomType), {
+				wrapper: wrapper.withSetting('E2E_Enable', true).build(),
+			});
+			const describe = result.current;
+
+			expect(describe({ isPrivate: true, encrypted: true })).toBe('Encrypted_messages');
+		});
+
+		it('returns "Encrypted_messages_false" when private and encrypted are false and E2E is enabled', () => {
+			const { result } = renderHook(() => useEncryptedRoomDescription(roomType), {
+				wrapper: wrapper.withSetting('E2E_Enable', true).build(),
+			});
+			const describe = result.current;
+
+			expect(describe({ isPrivate: true, encrypted: false })).toBe('Encrypted_messages_false');
+		});
+	});
+});
+
+describe('useEncryptedRoomDescription, Portuguese (pt-BR)', () => {
+	it('returns "Encrypted_not_available" when channel is not private and E2E is enabled,', () => {
+		const { result } = renderHook(() => useEncryptedRoomDescription('channel'), {
+			wrapper: mockAppRoot()
+				.withSetting('E2E_Enable', true)
+				.withDefaultLanguage('pt-BR')
+				.withTranslations('pt-BR', 'core', {
+					Encrypted_not_available: 'Indisponível para {{roomType}} público',
+					channel: 'canal',
+					team: 'equipe',
+				})
+				.build(),
+		});
+		const describe = result.current;
+
+		expect(describe({ isPrivate: false, encrypted: false })).toBe('Indisponível para canal público');
+	});
+
+	it('returns "Encrypted_not_available" when team is not private and E2E is enabled,', () => {
+		const { result } = renderHook(() => useEncryptedRoomDescription('team'), {
+			wrapper: mockAppRoot()
+				.withSetting('E2E_Enable', true)
+				.withDefaultLanguage('pt-BR')
+				.withTranslations('pt-BR', 'core', {
+					Encrypted_not_available: 'Indisponível para {{roomType}} público',
+					channel: 'canal',
+					team: 'equipe',
+				})
+				.build(),
+		});
+		const describe = result.current;
+
+		expect(describe({ isPrivate: false, encrypted: false })).toBe('Indisponível para equipe público');
+	});
+
+	it('returns "Encrypted_messages" when channel is private and encrypted are true and E2E is enabled', () => {
+		const { result } = renderHook(() => useEncryptedRoomDescription('channel'), {
+			wrapper: mockAppRoot()
+				.withSetting('E2E_Enable', true)
+				.withDefaultLanguage('pt-BR')
+				.withTranslations('pt-BR', 'core', {
+					// TODO: Improve the portuguese translation with a way to captalize the room type for it to be in the start of the sentence
+					Encrypted_messages:
+						'Criptografado de ponta a ponta {{roomType}}. A pesquisa não funcionará com {{roomType}} criptografado e as notificações podem não mostrar o conteúdo das mensagens.',
+					team: 'equipe',
+					channel: 'canal',
+				})
+				.build(),
+		});
+		const describe = result.current;
+
+		expect(describe({ isPrivate: true, encrypted: true })).toBe(
+			'Criptografado de ponta a ponta canal. A pesquisa não funcionará com canal criptografado e as notificações podem não mostrar o conteúdo das mensagens.',
+		);
+	});
+
+	it('returns "Encrypted_messages" when team is private and encrypted are true and E2E is enabled', () => {
+		const { result } = renderHook(() => useEncryptedRoomDescription('team'), {
+			wrapper: mockAppRoot()
+				.withSetting('E2E_Enable', true)
+				.withTranslations('pt-BR', 'core', {
+					Encrypted_messages:
+						'Criptografado de ponta a ponta {{roomType}}. A pesquisa não funcionará com {{roomType}} criptografado e as notificações podem não mostrar o conteúdo das mensagens.',
+					channel: 'canal',
+					team: 'equipe',
+				})
+				.withDefaultLanguage('pt-BR')
+				.build(),
+		});
+		const describe = result.current;
+
+		expect(describe({ isPrivate: true, encrypted: true })).toBe(
+			'Criptografado de ponta a ponta equipe. A pesquisa não funcionará com equipe criptografado e as notificações podem não mostrar o conteúdo das mensagens.',
+		);
+	});
+});

apps/meteor/client/navbar/NavBarPagesGroup/actions/useEncryptedRoomDescription.ts

@@ -0,0 +1,24 @@
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+export const useEncryptedRoomDescription = (roomType: 'channel' | 'team' | 'discussion') => {
+	const { t } = useTranslation();
+	const e2eEnabled = useSetting('E2E_Enable');
+	const e2eEnforcedForPrivate = Boolean(useSetting('E2E_Force_Encryption_For_Private_Rooms')) && Boolean(e2eEnabled);
+
+	return ({ isPrivate, encrypted }: { isPrivate: boolean; encrypted: boolean }) => {
+		if (!e2eEnabled) {
+			return t('Not_available_for_this_workspace');
+		}
+		if (!isPrivate) {
+			return t('Encrypted_not_available', { roomType: t(roomType) });
+		}
+		if (e2eEnforcedForPrivate && encrypted) {
+			return t('Encrypted_enforced_by_workspace_policy');
+		}
+		if (encrypted) {
+			return t('Encrypted_messages', { roomType: t(roomType) });
+		}
+		return t('Encrypted_messages_false');
+	};
+};

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useCreateNewItems.ts

@@ -0,0 +1,64 @@
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useTranslation, useSetting, useAtLeastOnePermission } from '@rocket.chat/ui-contexts';
+
+import { useCreateRoomModal } from './useCreateRoomModal';
+import CreateDiscussion from '../../../components/CreateDiscussion';
+import CreateChannelModal from '../actions/CreateChannelModal';
+import CreateDirectMessage from '../actions/CreateDirectMessage';
+import CreateTeamModal from '../actions/CreateTeamModal';
+
+const CREATE_CHANNEL_PERMISSIONS = ['create-c', 'create-p'];
+const CREATE_TEAM_PERMISSIONS = ['create-team'];
+const CREATE_DIRECT_PERMISSIONS = ['create-d'];
+const CREATE_DISCUSSION_PERMISSIONS = ['start-discussion', 'start-discussion-other-user'];
+
+export type UseCreateNewItemsParams = {
+	onCreateSuccess?: (rid: string, name?: string) => void | Promise<void>;
+};
+
+export const useCreateNewItems = ({ onCreateSuccess }: UseCreateNewItemsParams = {}): GenericMenuItemProps[] => {
+	const t = useTranslation();
+	const discussionEnabled = useSetting('Discussion_enabled');
+
+	const canCreateChannel = useAtLeastOnePermission(CREATE_CHANNEL_PERMISSIONS);
+	const canCreateTeam = useAtLeastOnePermission(CREATE_TEAM_PERMISSIONS);
+	const canCreateDirectMessages = useAtLeastOnePermission(CREATE_DIRECT_PERMISSIONS);
+	const canCreateDiscussion = useAtLeastOnePermission(CREATE_DISCUSSION_PERMISSIONS);
+
+	const createChannel = useCreateRoomModal(CreateChannelModal, onCreateSuccess);
+	const createTeam = useCreateRoomModal(CreateTeamModal, onCreateSuccess);
+	const createDiscussion = useCreateRoomModal(CreateDiscussion, onCreateSuccess);
+	const createDirectMessage = useCreateRoomModal(CreateDirectMessage, onCreateSuccess);
+
+	const createChannelItem: GenericMenuItemProps = {
+		id: 'channel',
+		content: t('Channel'),
+		icon: 'hashtag',
+		onClick: () => createChannel(),
+	};
+	const createTeamItem: GenericMenuItemProps = {
+		id: 'team',
+		content: t('Team'),
+		icon: 'team',
+		onClick: () => createTeam(),
+	};
+	const createDirectMessageItem: GenericMenuItemProps = {
+		id: 'direct',
+		content: t('Direct_message'),
+		icon: 'balloon',
+		onClick: () => createDirectMessage(),
+	};
+	const createDiscussionItem: GenericMenuItemProps = {
+		id: 'discussion',
+		content: t('Discussion'),
+		icon: 'discussion',
+		onClick: () => createDiscussion(),
+	};
+
+	return [
+		...(canCreateDirectMessages ? [createDirectMessageItem] : []),
+		...(canCreateDiscussion && discussionEnabled ? [createDiscussionItem] : []),
+		...(canCreateChannel ? [createChannelItem] : []),
+		...(canCreateTeam && canCreateChannel ? [createTeamItem] : []),
+	];
+};

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useCreateNewMenu.ts

@@ -0,0 +1,41 @@
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useAtLeastOnePermission } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { useCreateNewItems } from './useCreateNewItems';
+import { useCategoryModals } from '../../../sidebar/categories/hooks/useCategoryModals';
+import { useOutboundMessageAccess } from '../../../views/omnichannel/components/outboundMessage/hooks';
+import { useOutboundMessageModal } from '../../../views/omnichannel/components/outboundMessage/modals';
+
+const CREATE_ROOM_PERMISSIONS = ['create-c', 'create-p', 'create-d', 'start-discussion', 'start-discussion-other-user'];
+
+export const useCreateNewMenu = () => {
+	const { t } = useTranslation();
+	const showCreate = useAtLeastOnePermission(CREATE_ROOM_PERMISSIONS);
+	const { openCreate } = useCategoryModals();
+
+	const canSendOutboundMessage = useOutboundMessageAccess();
+	const outboundMessageModal = useOutboundMessageModal();
+
+	const createRoomItems = useCreateNewItems();
+	const outboundMessageItem: GenericMenuItemProps = {
+		id: 'outbound-message',
+		content: t('Outbound_message'),
+		icon: 'send',
+		onClick: () => outboundMessageModal.open(),
+	};
+
+	const sections = [
+		{
+			title: t('Create_new'),
+			items: [...createRoomItems, ...(canSendOutboundMessage ? [outboundMessageItem] : [])],
+			permission: showCreate || canSendOutboundMessage,
+		},
+		{
+			items: [{ id: 'category', icon: 'folder', content: t('Category'), onClick: () => openCreate() }] as GenericMenuItemProps[],
+			permission: true,
+		},
+	];
+
+	return sections.filter((section) => section.permission);
+};

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useCreateRoomModal.tsx

@@ -0,0 +1,18 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useSetModal } from '@rocket.chat/ui-contexts';
+import type { ElementType } from 'react';
+
+export const useCreateRoomModal = (
+	Component: ElementType<{ onSuccess?: (rid: string, name?: string) => void | Promise<void>; onClose: () => void }>,
+	onSuccess?: (rid: string, name?: string) => void | Promise<void>,
+): (() => void) => {
+	const setModal = useSetModal();
+
+	return useStableCallback(() => {
+		const handleClose = (): void => {
+			setModal(null);
+		};
+
+		setModal(<Component onSuccess={onSuccess} onClose={handleClose} />);
+	});
+};

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.spec.ts

@@ -0,0 +1,25 @@
+import { renderHook } from '@testing-library/react';
+
+import { useGroupingListItems } from './useGroupingListItems';
+
+it('should render groupingList items', async () => {
+	const { result } = renderHook(() => useGroupingListItems());
+
+	expect(result.current[0]).toEqual(
+		expect.objectContaining({
+			id: 'unread',
+		}),
+	);
+
+	expect(result.current[1]).toEqual(
+		expect.objectContaining({
+			id: 'favorites',
+		}),
+	);
+
+	expect(result.current[2]).toEqual(
+		expect.objectContaining({
+			id: 'types',
+		}),
+	);
+});

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx

@@ -0,0 +1,47 @@
+import { CheckBox } from '@rocket.chat/fuselage';
+import { useFeaturePreview, type GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const useGroupingListItems = (): GenericMenuItemProps[] => {
+	const { t } = useTranslation();
+	const secondSidebarEnabled = useFeaturePreview('secondarySidebar');
+
+	const sidebarGroupByType = useUserPreference<boolean>('sidebarGroupByType');
+	const sidebarShowFavorites = useUserPreference<boolean>('sidebarShowFavorites');
+	const sidebarShowUnread = useUserPreference<boolean>('sidebarShowUnread');
+
+	const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences');
+
+	const useHandleChange = (key: 'sidebarGroupByType' | 'sidebarShowFavorites' | 'sidebarShowUnread', value: boolean): (() => void) =>
+		useCallback(() => saveUserPreferences({ data: { [key]: value } }), [key, value]);
+
+	const handleChangeGroupByType = useHandleChange('sidebarGroupByType', !sidebarGroupByType);
+	const handleChangeShoFavorite = useHandleChange('sidebarShowFavorites', !sidebarShowFavorites);
+	const handleChangeShowUnread = useHandleChange('sidebarShowUnread', !sidebarShowUnread);
+
+	return [
+		{
+			id: 'unread',
+			content: t('Unread'),
+			icon: 'flag',
+			onClick: handleChangeShowUnread,
+			addon: <CheckBox checked={sidebarShowUnread} onChange={() => undefined} />,
+		},
+		!secondSidebarEnabled && {
+			id: 'favorites',
+			content: t('Favorites'),
+			icon: 'star',
+			onClick: handleChangeShoFavorite,
+			addon: <CheckBox checked={sidebarShowFavorites} onChange={() => undefined} />,
+		},
+		{
+			id: 'types',
+			content: t('Types'),
+			icon: 'group-by-type',
+			onClick: handleChangeGroupByType,
+			addon: <CheckBox checked={sidebarGroupByType} onChange={() => undefined} />,
+		},
+	].filter(Boolean) as GenericMenuItemProps[];
+};

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGrouppingListItems.spec.ts

@@ -0,0 +1,47 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { renderHook } from '@testing-library/react';
+
+import { useGroupingListItems } from './useGroupingListItems';
+
+it('should render all groupingList items', async () => {
+	const { result } = renderHook(() => useGroupingListItems());
+
+	expect(result.current[0]).toEqual(
+		expect.objectContaining({
+			id: 'unread',
+		}),
+	);
+
+	expect(result.current[1]).toEqual(
+		expect.objectContaining({
+			id: 'favorites',
+		}),
+	);
+
+	expect(result.current[2]).toEqual(
+		expect.objectContaining({
+			id: 'types',
+		}),
+	);
+});
+
+it('should render only unread and types groupingList items if secondarySidebar is enabled', async () => {
+	const { result } = renderHook(() => useGroupingListItems(), {
+		wrapper: mockAppRoot()
+			.withSetting('Accounts_AllowFeaturePreview', true)
+			.withUserPreference('featuresPreview', [{ name: 'secondarySidebar', value: true }])
+			.build(),
+	});
+
+	expect(result.current[0]).toEqual(
+		expect.objectContaining({
+			id: 'unread',
+		}),
+	);
+
+	expect(result.current[1]).toEqual(
+		expect.objectContaining({
+			id: 'types',
+		}),
+	);
+});

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useMarketPlaceMenu.spec.ts

@@ -0,0 +1,68 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { renderHook } from '@testing-library/react';
+
+import { useMarketPlaceMenu } from './useMarketPlaceMenu';
+
+it('should return and empty array if the user does not have `manage-apps` and `access-marketplace` permission', () => {
+	const { result } = renderHook(() => useMarketPlaceMenu(), {
+		wrapper: mockAppRoot()
+			.withEndpoint('GET', '/apps/actionButtons', () => [])
+			.build(),
+	});
+
+	expect(result.current[0].items).toEqual([]);
+});
+
+it('should return `explore` and `installed` items if the user has `access-marketplace` permission', () => {
+	const { result } = renderHook(() => useMarketPlaceMenu(), {
+		wrapper: mockAppRoot()
+			.withEndpoint('GET', '/apps/actionButtons', () => [])
+			.withPermission('access-marketplace')
+			.build(),
+	});
+
+	expect(result.current[0].items[0]).toEqual(
+		expect.objectContaining({
+			id: 'explore',
+		}),
+	);
+
+	expect(result.current[0].items[1]).toEqual(
+		expect.objectContaining({
+			id: 'installed',
+		}),
+	);
+});
+
+it('should return `explore`, `installed` and `requested` items if the user has `manage-apps` permission', () => {
+	const { result } = renderHook(() => useMarketPlaceMenu(), {
+		wrapper: mockAppRoot()
+			.withEndpoint('GET', '/apps/actionButtons', () => [])
+			.withEndpoint('GET', '/apps/app-request/stats', () => ({
+				data: {
+					totalSeen: 0,
+					totalUnseen: 1,
+				},
+			}))
+			.withPermission('manage-apps')
+			.build(),
+	});
+
+	expect(result.current[0].items[0]).toEqual(
+		expect.objectContaining({
+			id: 'explore',
+		}),
+	);
+
+	expect(result.current[0].items[1]).toEqual(
+		expect.objectContaining({
+			id: 'installed',
+		}),
+	);
+
+	expect(result.current[0].items[2]).toEqual(
+		expect.objectContaining({
+			id: 'requested-apps',
+		}),
+	);
+});

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useMarketPlaceMenu.tsx

@@ -0,0 +1,57 @@
+import { Badge, Skeleton } from '@rocket.chat/fuselage';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useTranslation, usePermission, useRouter } from '@rocket.chat/ui-contexts';
+
+import { useAppRequestStats } from '../../../views/marketplace/hooks/useAppRequestStats';
+
+export const useMarketPlaceMenu = () => {
+	const t = useTranslation();
+
+	const hasManageAppsPermission = usePermission('manage-apps');
+	const hasAccessMarketplacePermission = usePermission('access-marketplace');
+
+	const showMarketplace = hasAccessMarketplacePermission || hasManageAppsPermission;
+
+	const router = useRouter();
+
+	const appRequestStats = useAppRequestStats();
+
+	const marketPlaceItems: GenericMenuItemProps[] = [
+		{
+			id: 'explore',
+			icon: 'compass',
+			content: t('Explore'),
+			onClick: () => router.navigate('/marketplace/explore/list'),
+		},
+		{
+			id: 'installed',
+			icon: 'circle-arrow-down',
+			content: t('Installed'),
+			onClick: () => router.navigate('/marketplace/installed/list'),
+		},
+	];
+
+	const appsManagementItem: GenericMenuItemProps = {
+		id: 'requested-apps',
+		icon: 'cube',
+		content: t('Requested'),
+		onClick: () => {
+			router.navigate('/marketplace/requested/list');
+		},
+		addon: (
+			<>
+				{appRequestStats.isLoading && <Skeleton variant='circle' height={16} width={16} />}
+				{appRequestStats.isSuccess && appRequestStats.data.totalUnseen > 0 && (
+					<Badge variant='primary'>{appRequestStats.data.totalUnseen}</Badge>
+				)}
+			</>
+		),
+	};
+
+	return [
+		{
+			title: t('Marketplace'),
+			items: [...(showMarketplace ? marketPlaceItems : []), ...(hasManageAppsPermission ? [appsManagementItem] : [])],
+		},
+	];
+};

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortMenu.ts

@@ -0,0 +1,22 @@
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useFeaturePreview } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import { useGroupingListItems } from './useGroupingListItems';
+import { useSortModeItems } from './useSortModeItems';
+import { useViewModeItems } from './useViewModeItems';
+
+export const useSortMenu = () => {
+	const { t } = useTranslation();
+	const secondSidebarEnabled = useFeaturePreview('secondarySidebar');
+
+	const viewModeItems = useViewModeItems();
+	const sortModeItems = useSortModeItems();
+	const groupingListItems = useGroupingListItems();
+
+	return [
+		!secondSidebarEnabled ? { title: t('Display'), items: viewModeItems } : undefined,
+		{ title: t('Sort_By'), items: sortModeItems },
+		{ title: t('Group_by'), items: groupingListItems },
+	].filter(Boolean) as { title: string; items: GenericMenuItemProps[] }[];
+};

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.spec.ts

@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react';
+
+import { useSortModeItems } from './useSortModeItems';
+
+it('should render sortMode items', async () => {
+	const { result } = renderHook(() => useSortModeItems());
+
+	expect(result.current[0]).toEqual(
+		expect.objectContaining({
+			id: 'activity',
+		}),
+	);
+
+	expect(result.current[1]).toEqual(
+		expect.objectContaining({
+			id: 'name',
+		}),
+	);
+});

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx

@@ -0,0 +1,43 @@
+import { RadioButton } from '@rocket.chat/fuselage';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+	OmnichannelSortingDisclaimer,
+	useOmnichannelSortingDisclaimer,
+} from '../../../views/omnichannel/components/OmnichannelSortingDisclaimer';
+
+export const useSortModeItems = (): GenericMenuItemProps[] => {
+	const { t } = useTranslation();
+
+	const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences');
+	const sidebarSortBy = useUserPreference<'activity' | 'alphabetical'>('sidebarSortby', 'activity');
+	const isOmnichannelEnabled = useOmnichannelSortingDisclaimer();
+
+	const useHandleChange = (value: 'alphabetical' | 'activity'): (() => void) =>
+		useCallback(() => saveUserPreferences({ data: { sidebarSortby: value } }), [value]);
+
+	const setToAlphabetical = useHandleChange('alphabetical');
+	const setToActivity = useHandleChange('activity');
+
+	return [
+		{
+			id: 'activity',
+			content: t('Activity'),
+			icon: 'clock',
+			onClick: setToActivity,
+			addon: <RadioButton checked={sidebarSortBy === 'activity'} onChange={() => undefined} />,
+			description: sidebarSortBy === 'activity' && isOmnichannelEnabled && <OmnichannelSortingDisclaimer />,
+		},
+		{
+			id: 'name',
+			content: t('Name'),
+			icon: 'sort-az',
+			onClick: setToAlphabetical,
+			addon: <RadioButton checked={sidebarSortBy === 'alphabetical'} onChange={() => undefined} />,
+			description: sidebarSortBy === 'alphabetical' && isOmnichannelEnabled && <OmnichannelSortingDisclaimer />,
+		},
+	];
+};

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.spec.ts

@@ -0,0 +1,31 @@
+import { renderHook } from '@testing-library/react';
+
+import { useViewModeItems } from './useViewModeItems';
+
+it('should render viewMode items', async () => {
+	const { result } = renderHook(() => useViewModeItems());
+
+	expect(result.current[0]).toEqual(
+		expect.objectContaining({
+			id: 'extended',
+		}),
+	);
+
+	expect(result.current[1]).toEqual(
+		expect.objectContaining({
+			id: 'medium',
+		}),
+	);
+
+	expect(result.current[2]).toEqual(
+		expect.objectContaining({
+			id: 'condensed',
+		}),
+	);
+
+	expect(result.current[3]).toEqual(
+		expect.objectContaining({
+			id: 'avatars',
+		}),
+	);
+});

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx

@@ -0,0 +1,57 @@
+import { RadioButton, ToggleSwitch } from '@rocket.chat/fuselage';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const useViewModeItems = (): GenericMenuItemProps[] => {
+	const { t } = useTranslation();
+
+	const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences');
+
+	const useHandleChange = (value: 'medium' | 'extended' | 'condensed'): (() => void) =>
+		useCallback(() => saveUserPreferences({ data: { sidebarViewMode: value } }), [value]);
+
+	const sidebarViewMode = useUserPreference<'medium' | 'extended' | 'condensed'>('sidebarViewMode', 'extended');
+	const sidebarDisplayAvatar = useUserPreference('sidebarDisplayAvatar', false);
+
+	const setToExtended = useHandleChange('extended');
+	const setToMedium = useHandleChange('medium');
+	const setToCondensed = useHandleChange('condensed');
+
+	const handleChangeSidebarDisplayAvatar = useCallback(
+		() => saveUserPreferences({ data: { sidebarDisplayAvatar: !sidebarDisplayAvatar } }),
+		[saveUserPreferences, sidebarDisplayAvatar],
+	);
+
+	return [
+		{
+			id: 'extended',
+			content: t('Extended'),
+			icon: 'extended-view',
+			onClick: setToExtended,
+			addon: <RadioButton checked={sidebarViewMode === 'extended'} onChange={() => undefined} />,
+		},
+		{
+			id: 'medium',
+			content: t('Medium'),
+			icon: 'medium-view',
+			onClick: setToMedium,
+			addon: <RadioButton checked={sidebarViewMode === 'medium'} onChange={() => undefined} />,
+		},
+		{
+			id: 'condensed',
+			content: t('Condensed'),
+			icon: 'condensed-view',
+			onClick: setToCondensed,
+			addon: <RadioButton checked={sidebarViewMode === 'condensed'} onChange={() => undefined} />,
+		},
+		{
+			id: 'avatars',
+			content: t('Avatars'),
+			icon: 'user-rounded',
+			onClick: handleChangeSidebarDisplayAvatar,
+			addon: <ToggleSwitch checked={sidebarDisplayAvatar} onChange={() => undefined} />,
+		},
+	];
+};

apps/meteor/client/navbar/NavBarPagesGroup/index.ts

@@ -0,0 +1 @@
+export { default } from './NavBarPagesGroup';