feat: New team collab sidebar filters

apps/meteor/client/sidebarv2/RoomList/RoomListFilters.tsx

@@ -17,7 +17,7 @@ import {
 const filtersIcons: { [Key in SidePanelFiltersKeys]: IconName } = {
 	All: 'inbox',
 	Mentions: 'at',
-	Starred: 'star',
+	Favorites: 'star',
 	Discussions: 'baloons',
 	In_progress: 'user-arrow-right',
 	Queue: 'burger-arrow-left',

apps/meteor/client/views/navigation/contexts/RoomsNavigationContext.ts

@@ -7,8 +7,8 @@ import { useCollapsedGroups } from '../hooks/useCollapsedGroups';
 
 export const TEAM_COLLAB_GROUPS = {
 	ALL: 'All',
-	STARRED: 'Starred',
 	MENTIONS: 'Mentions',
+	FAVORITES: 'Favorites',
 	DISCUSSIONS: 'Discussions',
 } as const;
 

apps/meteor/client/views/navigation/providers/RoomsNavigationProvider.tsx

@@ -96,7 +96,7 @@ const useRoomsGroups = (): [GroupMap, UnreadGroupDataMap] => {
 				}
 
 				if (favoritesEnabled && room.f) {
-					setGroupRoom(SIDE_PANEL_GROUPS.STARRED, room);
+					setGroupRoom(SIDE_PANEL_GROUPS.FAVORITES, room);
 				}
 
 				if (room.teamMain) {

apps/meteor/client/views/navigation/sidepanel/SidePanel.tsx

@@ -1,25 +1,26 @@
 import { Box, Sidepanel, SidepanelHeader, SidepanelHeaderTitle, SidepanelListItem, ToggleSwitch } from '@rocket.chat/fuselage';
-import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
 import { memo, useId, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Virtuoso } from 'react-virtuoso';
 
+import SidePanelNoResults from './SidePanelNoResults';
 import { VirtualizedScrollbars } from '../../../components/CustomScrollbars';
-import GenericNoResults from '../../../components/GenericNoResults';
 import { useOpenedRoom, useSecondLevelOpenedRoom } from '../../../lib/RoomManager';
 import { usePreventDefault } from '../../../sidebarv2/hooks/usePreventDefault';
 import RoomSidepanelListWrapper from '../../room/Sidepanel/RoomSidepanelListWrapper';
 import RoomSidepanelItem from '../../room/Sidepanel/SidepanelItem';
+import type { SidePanelFiltersKeys } from '../contexts/RoomsNavigationContext';
 
 type SidePanelProps = {
-	headerTitle: TranslationKey;
+	currentTab: SidePanelFiltersKeys;
 	onlyUnreads: boolean;
 	toggleOnlyUnreads: () => void;
 	// TODO: This can also be of type ILivechatInquiryRecord[]
 	rooms: SubscriptionWithRoom[];
 };
 
-const SidePanel = ({ headerTitle, onlyUnreads, toggleOnlyUnreads, rooms }: SidePanelProps) => {
+const SidePanel = ({ currentTab, onlyUnreads, toggleOnlyUnreads, rooms }: SidePanelProps) => {
 	const { t } = useTranslation();
 	const ref = useRef(null);
 	const unreadFieldId = useId();
@@ -31,7 +32,7 @@ const SidePanel = ({ headerTitle, onlyUnreads, toggleOnlyUnreads, rooms }: SideP
 	return (
 		<Sidepanel role='tabpanel'>
 			<SidepanelHeader>
-				<SidepanelHeaderTitle>{t(headerTitle)}</SidepanelHeaderTitle>
+				<SidepanelHeaderTitle>{t(currentTab)}</SidepanelHeaderTitle>
 				<Box display='flex' alignItems='center'>
 					<Box htmlFor={unreadFieldId} is='label' fontScale='c1' mie={8}>
 						{t('Unread')}
@@ -40,7 +41,7 @@ const SidePanel = ({ headerTitle, onlyUnreads, toggleOnlyUnreads, rooms }: SideP
 				</Box>
 			</SidepanelHeader>
 			<Box pb={8} h='full' ref={ref}>
-				{rooms && rooms.length === 0 && <GenericNoResults />}
+				{rooms && rooms.length === 0 && <SidePanelNoResults currentTab={currentTab} onlyUnreads={onlyUnreads} />}
 				<VirtualizedScrollbars>
 					<Virtuoso
 						totalCount={rooms.length}

apps/meteor/client/views/navigation/sidepanel/SidePanelNoResults.tsx

@@ -0,0 +1,41 @@
+import { useTranslation } from 'react-i18next';
+
+import GenericNoResults from '../../../components/GenericNoResults';
+import { SIDE_PANEL_GROUPS, type SidePanelFiltersKeys } from '../contexts/RoomsNavigationContext';
+
+type SidePanelNoResultsProps = { currentTab: SidePanelFiltersKeys; onlyUnreads: boolean };
+
+const SidePanelNoResults = ({ currentTab, onlyUnreads }: SidePanelNoResultsProps) => {
+	const { t } = useTranslation();
+
+	switch (currentTab) {
+		case SIDE_PANEL_GROUPS.MENTIONS:
+			return (
+				<GenericNoResults
+					icon='at'
+					title={onlyUnreads ? t('No_unread_mentions') : t('No_mentions')}
+					description={onlyUnreads ? t('No_unread_mentions_description') : t('No_mentions_description')}
+				/>
+			);
+		case SIDE_PANEL_GROUPS.FAVORITES:
+			return (
+				<GenericNoResults
+					icon='star'
+					title={onlyUnreads ? t('No_unread_favorite_rooms') : t('No_favorite_rooms')}
+					description={onlyUnreads ? t('No_unread_favorite_rooms_description') : t('No_favorite_rooms_description')}
+				/>
+			);
+		case SIDE_PANEL_GROUPS.DISCUSSIONS:
+			return (
+				<GenericNoResults
+					icon='baloons'
+					title={onlyUnreads ? t('No_unread_discussions') : t('No_discussions')}
+					description={onlyUnreads ? t('No_unread_discussions_description') : t('No_discussions_description')}
+				/>
+			);
+		default:
+			return <GenericNoResults icon='inbox' title={onlyUnreads ? t('No_unread_rooms') : t('No_rooms')} />;
+	}
+};
+
+export default SidePanelNoResults;

apps/meteor/client/views/navigation/sidepanel/SidePanelRouter.tsx

@@ -1,19 +1,22 @@
 import SidePanelAll from './tabs/SidePanelAll';
 import { SIDE_PANEL_GROUPS, useSidePanelFilter } from '../contexts/RoomsNavigationContext';
+import SidePanelDiscussions from './tabs/SidePanelDiscussions';
+import SidePanelFavorites from './tabs/SidePanelFavorites';
+import SidePanelMentions from './tabs/SidePanelMentions';
 
 const SidePanelRouter = () => {
 	const [currentTab] = useSidePanelFilter();
 
 	// TODO: figure out if we need this switch
 	switch (currentTab) {
 		case SIDE_PANEL_GROUPS.ALL:
-			return <SidePanelAll currentTab={currentTab} />;
-		// case SIDE_PANEL_GROUPS.FAVORITES:
-		// 	return <SidePanelFavorites currentTab={currentTab} />;
-		// case SIDE_PANEL_GROUPS.MENTIONS:
-		// 	return null; // TODO implement tab
-		// case SIDE_PANEL_GROUPS.DISCUSSIONS:
-		// 	return null; // TODO implement tab
+			return <SidePanelAll />;
+		case SIDE_PANEL_GROUPS.MENTIONS:
+			return <SidePanelMentions />;
+		case SIDE_PANEL_GROUPS.FAVORITES:
+			return <SidePanelFavorites />;
+		case SIDE_PANEL_GROUPS.DISCUSSIONS:
+			return <SidePanelDiscussions />;
 		// case SIDE_PANEL_GROUPS.IN_PROGRESS:
 		// 	return null; // TODO implement tab
 		// case SIDE_PANEL_GROUPS.QUEUE:

apps/meteor/client/views/navigation/sidepanel/tabs/SidePanelAll.tsx

@@ -1,16 +1,15 @@
-import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
 
-import type { SidePanelFiltersKeys } from '../../contexts/RoomsNavigationContext';
-import { useSidePanelRoomsListTab, useUnreadOnlyToggle } from '../../contexts/RoomsNavigationContext';
+import { SIDE_PANEL_GROUPS, useSidePanelRoomsListTab, useUnreadOnlyToggle } from '../../contexts/RoomsNavigationContext';
 import SidePanel from '../SidePanel';
 
-const SidePanelAll = ({ currentTab }: { currentTab: SidePanelFiltersKeys }) => {
-	const rooms = useSidePanelRoomsListTab(currentTab);
+const SidePanelAll = () => {
+	const rooms = useSidePanelRoomsListTab(SIDE_PANEL_GROUPS.ALL);
 	const [unreadOnly, toggleOnlyUnreads] = useUnreadOnlyToggle();
 
 	return (
 		<SidePanel
-			headerTitle={currentTab as TranslationKey}
+			currentTab={SIDE_PANEL_GROUPS.ALL}
 			onlyUnreads={unreadOnly}
 			toggleOnlyUnreads={toggleOnlyUnreads}
 			rooms={rooms as SubscriptionWithRoom[]}

apps/meteor/client/views/navigation/sidepanel/tabs/SidePanelDiscussions.tsx

@@ -0,0 +1,20 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+
+import { SIDE_PANEL_GROUPS, useSidePanelRoomsListTab, useUnreadOnlyToggle } from '../../contexts/RoomsNavigationContext';
+import SidePanel from '../SidePanel';
+
+const SidePanelDiscussions = () => {
+	const rooms = useSidePanelRoomsListTab(SIDE_PANEL_GROUPS.DISCUSSIONS);
+	const [unreadOnly, toggleOnlyUnreads] = useUnreadOnlyToggle();
+
+	return (
+		<SidePanel
+			currentTab={SIDE_PANEL_GROUPS.DISCUSSIONS}
+			onlyUnreads={unreadOnly}
+			toggleOnlyUnreads={toggleOnlyUnreads}
+			rooms={rooms as SubscriptionWithRoom[]}
+		/>
+	);
+};
+
+export default SidePanelDiscussions;

apps/meteor/client/views/navigation/sidepanel/tabs/SidePanelFavorites.tsx

@@ -0,0 +1,20 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+
+import { SIDE_PANEL_GROUPS, useSidePanelRoomsListTab, useUnreadOnlyToggle } from '../../contexts/RoomsNavigationContext';
+import SidePanel from '../SidePanel';
+
+const SidePanelFavorites = () => {
+	const rooms = useSidePanelRoomsListTab(SIDE_PANEL_GROUPS.FAVORITES);
+	const [unreadOnly, toggleOnlyUnreads] = useUnreadOnlyToggle();
+
+	return (
+		<SidePanel
+			currentTab={SIDE_PANEL_GROUPS.FAVORITES}
+			onlyUnreads={unreadOnly}
+			toggleOnlyUnreads={toggleOnlyUnreads}
+			rooms={rooms as SubscriptionWithRoom[]}
+		/>
+	);
+};
+
+export default SidePanelFavorites;

apps/meteor/client/views/navigation/sidepanel/tabs/SidePanelMentions.tsx

@@ -0,0 +1,20 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+
+import { SIDE_PANEL_GROUPS, useSidePanelRoomsListTab, useUnreadOnlyToggle } from '../../contexts/RoomsNavigationContext';
+import SidePanel from '../SidePanel';
+
+const SidePanelMentions = () => {
+	const rooms = useSidePanelRoomsListTab(SIDE_PANEL_GROUPS.MENTIONS);
+	const [unreadOnly, toggleOnlyUnreads] = useUnreadOnlyToggle();
+
+	return (
+		<SidePanel
+			currentTab={SIDE_PANEL_GROUPS.MENTIONS}
+			onlyUnreads={unreadOnly}
+			toggleOnlyUnreads={toggleOnlyUnreads}
+			rooms={rooms as SubscriptionWithRoom[]}
+		/>
+	);
+};
+
+export default SidePanelMentions;

packages/i18n/src/locales/en.i18n.json

@@ -3573,9 +3573,17 @@
   "No_departments_yet": "No departments yet",
   "No_departments_yet_description": "Organize agents into departments, set how tickets get forwarded and monitor their performance.",
   "No_direct_messages_yet": "No Direct Messages.",
+  "No_discussions": "No discussions",
+  "No_discussions_description": "Discussions you've joined will appear hear.",
+  "No_unread_discussions": "No unread discussions",
+  "No_unread_discussions_description": "Unread discussions you've joined will appear hear.",
   "No_discussions_yet": "No discussions yet",
   "No_emojis_found": "No emojis found",
   "No_feature_to_preview": "No feature to preview",
+  "No_favorite_rooms": "No favorite rooms",
+  "No_favorite_rooms_description": "Your favorite rooms will appear here.",
+  "No_unread_favorite_rooms": "No unread favorite roomns",
+  "No_unread_favorite_rooms_description": "Your unread favorite rooms will appear here.",
   "No_files_found": "No files found",
   "No_files_found_to_prune": "No files found to prune",
   "No_files_left_to_download": "No files left to download",
@@ -3591,6 +3599,10 @@
   "No_marketplace_matches_for": "No Marketplace matches for",
   "No_members_found": "No members found",
   "No_mentions_found": "No mentions found",
+  "No_mentions": "No mentions",
+  "No_mentions_description": "@{username}, @all, @here mentions and highlighted words will appear here.",
+  "No_unread_mentions": "No unread mentions",
+  "No_unread_mentions_description": "Unread @{username}, @all, @here mentions and highlighted words will appear here.",
   "No_message_reports": "No message reports",
   "No_messages_found_to_prune": "No messages found to prune",
   "No_messages_yet": "No messages yet",
@@ -3617,6 +3629,8 @@
   "No_units_yet": "No units yet",
   "No_units_yet_description": "Use units to group departments and manage them better.",
   "No_user_reports": "No user reports",
+  "No_rooms": "No rooms",
+  "No_unread_rooms": "No unread rooms",
   "Nobody_available": "Nobody available",
   "Node_version": "Node Version",
   "None": "None",