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

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} />,
+		},
+	];
+};