feat(sidebar): wip custom categories

Author: dougfabris

.changeset/odd-times-sleep.md

@@ -0,0 +1,8 @@
+---
+'@rocket.chat/core-typings': minor
+'@rocket.chat/rest-typings': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Introduces custom, user-defined categories to the sidebar. Users can create, rename, delete and reorder categories (menu-driven), and move rooms into them via the room context menu or the room header

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

@@ -39,6 +39,7 @@ export type CreateChannelModalProps = {
 	mainRoom?: IRoom;
 	onClose: () => void;
 	reload?: () => void;
+	onSuccess?: (rid: string, name: string) => void | Promise<void>;
 };
 
 type CreateChannelModalPayload = {
@@ -70,7 +71,7 @@ const getFederationHintKey = (federationModule: boolean, featureToggle: boolean,
 
 const hasExternalMembers = (members: string[]): boolean => members.some((member) => member.startsWith('@'));
 
-const CreateChannelModal = ({ teamId = '', mainRoom, onClose, reload }: CreateChannelModalProps) => {
+const CreateChannelModal = ({ teamId = '', mainRoom, onClose, reload, onSuccess }: CreateChannelModalProps) => {
 	const t = useTranslation();
 	const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']);
 	const e2eEnabled = useSetting('E2E_Enable');
@@ -171,9 +172,11 @@ const CreateChannelModal = ({ teamId = '', mainRoom, onClose, reload }: CreateCh
 		try {
 			if (isPrivate) {
 				roomData = await createPrivateChannel(params);
+				await onSuccess?.(roomData.group._id, name);
 				if (!teamId) goToRoom(roomData.group._id);
 			} else {
 				roomData = await createChannel(params);
+				await onSuccess?.(roomData.channel._id, name);
 				if (!teamId) goToRoom(roomData.channel._id);
 			}
 

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

@@ -1,17 +1,26 @@
+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/useCategoryModals';
 
 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 createRoomItems = useCreateNewItems();
 
-	const sections = [{ title: t('Create_new'), items: createRoomItems, permission: showCreate }];
+	const sections = [
+		{ title: t('Create_new'), items: createRoomItems, permission: showCreate },
+		{
+			items: [{ id: 'category', icon: 'folder', content: t('Category'), onClick: () => openCreate() }] as GenericMenuItemProps[],
+			permission: true,
+		},
+	];
 
 	return sections.filter((section) => section.permission);
 };

apps/meteor/client/sidebar/RoomList/RoomList.tsx

@@ -11,6 +11,7 @@ import RoomListRow from './RoomListRow';
 import RoomListRowWrapper from './RoomListRowWrapper';
 import RoomListWrapper from './RoomListWrapper';
 import { useOpenedRoom } from '../../lib/RoomManager';
+import { useAllGroupsOrder } from '../hooks/useAllGroupsOrder';
 import { useAvatarTemplate } from '../hooks/useAvatarTemplate';
 import { useCollapsedGroups } from '../hooks/useCollapsedGroups';
 import { usePreventDefault } from '../hooks/usePreventDefault';
@@ -24,7 +25,8 @@ const RoomList = () => {
 	const isAnonymous = !userId;
 
 	const { collapsedGroups, handleClick, handleKeyDown } = useCollapsedGroups();
-	const { groupsCount, groupsList, roomList, groupedUnreadInfo } = useRoomList({ collapsedGroups });
+	const { groups, groupsCount, totalCount } = useRoomList({ collapsedGroups });
+	const { move: moveGroup } = useAllGroupsOrder();
 	const avatarTemplate = useAvatarTemplate();
 	const sideBarItemTemplate = useTemplateByViewMode();
 	const { ref } = useResizeObserver<HTMLElement>({ debounceDelay: 100 });
@@ -46,6 +48,8 @@ const RoomList = () => {
 		[avatarTemplate, extended, isAnonymous, openedRoom, sideBarItemTemplate, sidebarViewMode, t, userId],
 	);
 
+	const allGroupKeys = useMemo(() => groups.map((group) => group.key), [groups]);
+
 	usePreventDefault(ref);
 	useShortcutOpenMenu(ref);
 
@@ -54,17 +58,31 @@ const RoomList = () => {
 			<VirtualizedScrollbars>
 				<GroupedVirtuoso
 					groupCounts={groupsCount}
-					groupContent={(index) => (
-						<RoomListCollapser
-							collapsedGroups={collapsedGroups}
-							onClick={() => handleClick(groupsList[index])}
-							onKeyDown={(e) => handleKeyDown(e, groupsList[index])}
-							groupTitle={groupsList[index]}
-							unreadCount={groupedUnreadInfo[index]}
-						/>
-					)}
-					{...(roomList.length > 0 && {
-						itemContent: (index) => roomList[index] && <RoomListRow data={itemData} item={roomList[index]} />,
+					groupContent={(index) => {
+						const group = groups[index];
+
+						const onMoveUp = () => moveGroup(allGroupKeys, group.key, 'up');
+						const onMoveDown = () => moveGroup(allGroupKeys, group.key, 'down');
+
+						return (
+							<RoomListCollapser
+								group={group}
+								canMoveUp={index > 0}
+								canMoveDown={index < groups.length - 1}
+								onMoveUp={onMoveUp}
+								onMoveDown={onMoveDown}
+								onClick={() => handleClick(group.key)}
+								onKeyDown={(e) => handleKeyDown(e, group.key)}
+							/>
+						);
+					}}
+					{...(totalCount > 0 && {
+						itemContent: (index, groupIndex) => {
+							const group = groups[groupIndex];
+							const correctedIndex = index - groupsCount.slice(0, groupIndex).reduce((acc, count) => acc + count, 0);
+							const item = group.rooms[correctedIndex];
+							return item && <RoomListRow data={itemData} item={item} />;
+						},
 					})}
 					components={{ Item: RoomListRowWrapper, List: RoomListWrapper }}
 				/>

apps/meteor/client/sidebar/RoomList/RoomListCollapser.tsx

@@ -1,36 +1,53 @@
-import type { ISubscription } from '@rocket.chat/core-typings';
 import { Badge, SidebarV2CollapseGroup } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes, KeyboardEvent, MouseEventHandler } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import CategoryMenu from '../categories/CategoryMenu';
+import type { SidebarRoomListGroup } from '../hooks/useRoomList';
 import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
 
-export type RoomListCollapserProps = {
-	groupTitle: string;
-	collapsedGroups: string[];
+type RoomListCollapserProps = {
+	group: SidebarRoomListGroup;
+	canMoveUp: boolean;
+	canMoveDown: boolean;
+	onMoveUp: () => void;
+	onMoveDown: () => void;
 	onClick: MouseEventHandler<HTMLElement>;
 	onKeyDown: (e: KeyboardEvent) => void;
-	unreadCount: Pick<ISubscription, 'userMentions' | 'groupMentions' | 'unread' | 'tunread' | 'tunreadUser' | 'tunreadGroup'>;
 } & Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown'>;
-const RoomListCollapser = ({ groupTitle, unreadCount: unreadGroupCount, collapsedGroups, ...props }: RoomListCollapserProps) => {
+
+const RoomListCollapser = ({ group, canMoveUp, canMoveDown, onMoveUp, onMoveDown, ...props }: RoomListCollapserProps) => {
 	const { t } = useTranslation();
 
-	const { unreadTitle, unreadVariant, showUnread, unreadCount } = useUnreadDisplay(unreadGroupCount);
+	const { unreadTitle, unreadVariant, showUnread, unreadCount } = useUnreadDisplay(group.unreadInfo);
+
+	const title = group.translateTitle ? t(group.title as TranslationKey) : group.title;
 
 	return (
 		<SidebarV2CollapseGroup
-			title={t(groupTitle)}
-			expanded={!collapsedGroups.includes(groupTitle)}
+			title={title}
+			expanded={!group.empty && !group.collapsed}
 			badge={
 				showUnread ? (
 					<Badge variant={unreadVariant} title={unreadTitle} aria-label={unreadTitle} role='status'>
 						{unreadCount.total}
 					</Badge>
 				) : undefined
 			}
-			aria-label={
-				!collapsedGroups.includes(groupTitle) ? t('Collapse_group', { group: t(groupTitle) }) : t('Expand_group', { group: t(groupTitle) })
+			menu={
+				<CategoryMenu
+					category={group.category}
+					groupKey={group.key}
+					showUnreads={group.showUnreads}
+					keepUnreadsOnTop={group.keepUnreadsOnTop}
+					canMoveUp={canMoveUp}
+					canMoveDown={canMoveDown}
+					onMoveUp={onMoveUp}
+					onMoveDown={onMoveDown}
+				/>
 			}
+			aria-label={group.collapsed ? t('Expand_group', { group: title }) : t('Collapse_group', { group: title })}
 			{...props}
 		/>
 	);

apps/meteor/client/sidebar/RoomMenu.spec.tsx

@@ -33,6 +33,9 @@ const renderOptions = {
 			Hide: 'Hide',
 			Mark_unread: 'Mark Unread',
 			Favorite: 'Favorite',
+			Favorites: 'Favorites',
+			Move_to: 'Move to',
+			New_category: 'New category',
 			Leave_room: 'Leave',
 		})
 		.withSetting('Favorite_Rooms', true)
@@ -48,9 +51,19 @@ it('should display all the menu options for regular rooms', async () => {
 	await userEvent.click(menu as HTMLElement);
 
 	expect(await screen.findByRole('menuitem', { name: 'Hide' })).toBeInTheDocument();
-	expect(await screen.findByRole('menuitem', { name: 'Favorite' })).toBeInTheDocument();
 	expect(await screen.findByRole('menuitem', { name: 'Mark Unread' })).toBeInTheDocument();
 	expect(await screen.findByRole('menuitem', { name: 'Leave' })).toBeInTheDocument();
+	expect(await screen.findByRole('menuitem', { name: 'Move to' })).toBeInTheDocument();
+});
+
+it('should reveal Favorites inside the "Move to" submenu for regular rooms', async () => {
+	render(<RoomMenu {...defaultProps} />, renderOptions);
+
+	await userEvent.click(screen.queryByRole('button') as HTMLElement);
+	await userEvent.hover(await screen.findByRole('menuitem', { name: 'Move to' }));
+
+	expect(await screen.findByRole('menuitem', { name: 'Favorites' })).toBeInTheDocument();
+	expect(await screen.findByRole('menuitem', { name: 'New category' })).toBeInTheDocument();
 });
 
 it('should display only mark unread and favorite for omnichannel rooms', async () => {

apps/meteor/client/sidebar/RoomMenu.tsx

@@ -1,9 +1,13 @@
 import type { RoomType } from '@rocket.chat/core-typings';
-import { GenericMenu } from '@rocket.chat/ui-client';
-import { useTranslation } from '@rocket.chat/ui-contexts';
+import { Menu, MenuItem, MenuItemContent, MenuItemIcon, MenuItemInput, MenuSection, MenuSubmenuTrigger } from '@rocket.chat/fuselage';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericMenuItem } from '@rocket.chat/ui-client';
+import { useUserSubscription } from '@rocket.chat/ui-contexts';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useRoomMenuActions } from '../hooks/useRoomMenuActions';
+import { useRoomCategoryItems } from './categories/useRoomCategoryItems';
 
 export type RoomMenuProps = {
 	rid: string;
@@ -17,13 +21,97 @@ export type RoomMenuProps = {
 	hideDefaultOptions: boolean;
 };
 
+const makeHandleAction = (items: GenericMenuItemProps[]) => (id: string | number) => {
+	const item = items.find((item) => item.id === String(id) && !!item.onClick);
+	item?.onClick?.();
+};
+
+const renderSectionItem = (item: GenericMenuItemProps) => (
+	<MenuItem
+		key={item.id}
+		aria-label={typeof item.content === 'string' ? item.content : item.id}
+		textValue={typeof item.content === 'string' ? item.content : item.id}
+	>
+		<GenericMenuItem {...item} />
+	</MenuItem>
+);
+
+const renderSubmenuItem = (item: GenericMenuItemProps) => (
+	<MenuItem
+		key={item.id}
+		aria-label={typeof item.content === 'string' ? item.content : item.id}
+		textValue={typeof item.content === 'string' ? item.content : item.id}
+	>
+		{item.icon && <MenuItemIcon name={item.icon} color={item.iconColor} />}
+		{item.content && <MenuItemContent>{item.content}</MenuItemContent>}
+		{item.addon && <MenuItemInput>{item.addon}</MenuItemInput>}
+	</MenuItem>
+);
+
 const RoomMenu = ({ rid, unread, threadUnread, alert, roomOpen, type, cl, name = '', hideDefaultOptions = false }: RoomMenuProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
+	const subscription = useUserSubscription(rid);
+	const buildCategoryItems = useRoomCategoryItems();
 
 	const isUnread = alert || unread || threadUnread;
-	const sections = useRoomMenuActions({ rid, type, name, isUnread, cl, roomOpen, hideDefaultOptions });
+	const allSections = useRoomMenuActions({ rid, type, name, isUnread, cl, roomOpen, hideDefaultOptions });
+
+	if (!hideDefaultOptions && type !== 'l') {
+		const isFavorite = Boolean(subscription?.f);
+		const { moveToItems, removeItem } = buildCategoryItems({ rid, name, isFavorite });
+
+		// Strip toggleFavorite — the submenu's "Favorites" target replaces it.
+		const actionSections = allSections
+			.map((section) => ({ ...section, items: section.items.filter((item) => item.id !== 'toggleFavorite') }))
+			.filter((section) => section.items.length > 0);
+
+		// Separate "New category" from the regular category targets so it always goes last in the submenu.
+		const categoryTargets = moveToItems.filter((item) => item.id !== 'newCategory');
+		const newCategoryItem = moveToItems.find((item) => item.id === 'newCategory');
+
+		const allItems = [...actionSections.flatMap((s) => s.items), ...moveToItems, ...(removeItem ? [removeItem] : [])];
+		const disabledKeys = allItems.filter(({ disabled }) => disabled).map(({ id }) => id);
+		const handleAction = makeHandleAction(allItems);
+
+		const submenuActionsItems = [...(newCategoryItem ? [newCategoryItem] : []), ...(removeItem ? [removeItem] : [])];
+
+		return (
+			<Menu detached title={t('Options')} mini icon='kebab' aria-keyshortcuts='alt' onAction={handleAction} disabledKeys={disabledKeys}>
+				{[
+					...actionSections.map(({ title, items }, index) => (
+						<MenuSection key={title || String(index)} aria-label={title || t('Options')} title={title || undefined} items={items}>
+							{renderSectionItem}
+						</MenuSection>
+					)),
+					<MenuSection key='category' title={t('Category')}>
+						<MenuSubmenuTrigger key='moveTo' textValue={t('Move_to')}>
+							<MenuItem aria-label={t('Move_to')}>
+								<MenuItemIcon name='folder' />
+								<MenuItemContent>{t('Move_to')}</MenuItemContent>
+							</MenuItem>
+							<MenuSection items={categoryTargets}>{renderSubmenuItem}</MenuSection>
+							{submenuActionsItems.length > 0 && <MenuSection items={submenuActionsItems}>{renderSubmenuItem}</MenuSection>}
+						</MenuSubmenuTrigger>
+					</MenuSection>,
+				]}
+			</Menu>
+		);
+	}
+
+	// Livechat rooms or hideDefaultOptions — simple flat menu, no category submenu.
+	const allItems = allSections.flatMap((s) => s.items);
+	const disabledKeys = allItems.filter(({ disabled }) => disabled).map(({ id }) => id);
+	const handleAction = makeHandleAction(allItems);
 
-	return <GenericMenu detached title={t('Options')} mini aria-keyshortcuts='alt' sections={sections} />;
+	return (
+		<Menu detached title={t('Options')} mini icon='kebab' aria-keyshortcuts='alt' onAction={handleAction} disabledKeys={disabledKeys}>
+			{allSections.map(({ title, items }, index) => (
+				<MenuSection key={title || String(index)} aria-label={title || t('Options')} title={title || undefined} items={items}>
+					{renderSectionItem}
+				</MenuSection>
+			))}
+		</Menu>
+	);
 };
 
 export default memo(RoomMenu);