feat: New sidebar filters categories

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

@@ -1,31 +1,31 @@
 import { Box } from '@rocket.chat/fuselage';
 import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
 import { useUserPreference, useUserId } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GroupedVirtuoso } from 'react-virtuoso';
 
 import RoomListCollapser from './RoomListCollapser';
+import RoomsListFilters from './RoomListFilters';
 import RoomListRow from './RoomListRow';
 import RoomListRowWrapper from './RoomListRowWrapper';
 import RoomListWrapper from './RoomListWrapper';
 import { VirtualizedScrollbars } from '../../components/CustomScrollbars';
 import { useOpenedRoom } from '../../lib/RoomManager';
+import { useSideBarRoomsList } from '../../views/navigation/contexts/RoomsNavigationContext';
 import { useAvatarTemplate } from '../hooks/useAvatarTemplate';
-import { useCollapsedGroups } from '../hooks/useCollapsedGroups';
 import { usePreventDefault } from '../hooks/usePreventDefault';
-import { useRoomList } from '../hooks/useRoomList';
 import { useShortcutOpenMenu } from '../hooks/useShortcutOpenMenu';
 import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
 
 const RoomList = () => {
 	const { t } = useTranslation();
 	const isAnonymous = !useUserId();
 
-	const { collapsedGroups, handleClick, handleKeyDown } = useCollapsedGroups();
-	const { groupsCount, groupsList, roomList, groupedUnreadInfo } = useRoomList({ collapsedGroups });
-	const avatarTemplate = useAvatarTemplate();
-	const sideBarItemTemplate = useTemplateByViewMode();
+	const { roomListGroups, groupCounts, collapsedGroups, handleClick, handleKeyDown, totalCount } = useSideBarRoomsList();
+	const avatarTemplate = useAvatarTemplate('condensed');
+	const sideBarItemTemplate = useTemplateByViewMode('condensed');
 	const { ref } = useResizeObserver<HTMLElement>({ debounceDelay: 100 });
 	const openedRoom = useOpenedRoom() ?? '';
 	const sidebarViewMode = useUserPreference<'extended' | 'medium' | 'condensed'>('sidebarViewMode') || 'extended';
@@ -51,20 +51,30 @@ const RoomList = () => {
 		<Box position='relative' overflow='hidden' height='full' ref={ref}>
 			<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]} />,
+					groupCounts={groupCounts}
+					groupContent={(index) => {
+						const { group, unreadInfo } = roomListGroups[index];
+						return (
+							<RoomListCollapser
+								collapsedGroups={collapsedGroups}
+								onClick={() => handleClick(group)}
+								onKeyDown={(e) => handleKeyDown(e, group)}
+								groupTitle={group}
+								unreadCount={unreadInfo}
+							/>
+						);
+					}}
+					{...(totalCount > 0 && {
+						itemContent: (index, groupIndex) => {
+							const { rooms } = roomListGroups[groupIndex];
+							// Grouped virtuoso index increases linearly, but we're indexing the list by group.
+							// Either we go back to providing a single list, or we do this.
+							const correctedIndex = index - groupCounts.slice(0, groupIndex).reduce((acc, count) => acc + count, 0);
+							// TODO: ILivechatInquiryRecord
+							return rooms[correctedIndex] && <RoomListRow data={itemData} item={rooms[correctedIndex] as SubscriptionWithRoom} />;
+						},
 					})}
-					components={{ Item: RoomListRowWrapper, List: RoomListWrapper }}
+					components={{ Header: RoomsListFilters, Item: RoomListRowWrapper, List: RoomListWrapper }}
 				/>
 			</VirtualizedScrollbars>
 		</Box>

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

@@ -0,0 +1,72 @@
+import { Divider, Box } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import { forwardRef } from 'react';
+import type { Components } from 'react-virtuoso';
+
+import RoomListFiltersItem from './RoomListFiltersItem';
+import { useOmnichannelEnabled } from '../../hooks/omnichannel/useOmnichannelEnabled';
+import type { SidePanelFiltersKeys } from '../../views/navigation/contexts/RoomsNavigationContext';
+import {
+	OMNICHANNEL_GROUPS,
+	SIDE_PANEL_GROUPS,
+	TEAM_COLLAB_GROUPS,
+	useSwitchSidePanelTab,
+	useSidePanelFilter,
+} from '../../views/navigation/contexts/RoomsNavigationContext';
+
+const filtersIcons: { [Key in SidePanelFiltersKeys]: IconName } = {
+	All: 'inbox',
+	Mentions: 'at',
+	Starred: 'star',
+	Discussions: 'baloons',
+	In_progress: 'user-arrow-right',
+	Queue: 'burger-arrow-left',
+	On_Hold: 'pause-unfilled',
+};
+
+const RoomListFilters: Components['Header'] = forwardRef(function RoomListWrapper(_, ref) {
+	// const favoritesEnabled = useUserPreference('sidebarShowFavorites', true);
+	const showOmnichannel = useOmnichannelEnabled();
+
+	const switchSidePanelTab = useSwitchSidePanelTab();
+	const [currentTab] = useSidePanelFilter();
+
+	if (Object.values(SIDE_PANEL_GROUPS).length === 0) {
+		return null;
+	}
+
+	return (
+		<Box ref={ref} display='flex' flexDirection='column'>
+			<Box role='tablist' aria-orientation='vertical' mbs={8}>
+				{Object.values(TEAM_COLLAB_GROUPS).map((group) => (
+					<RoomListFiltersItem
+						key={group}
+						title={group}
+						selected={currentTab === group}
+						icon={filtersIcons[group]}
+						onClick={() => switchSidePanelTab(group)}
+					/>
+				))}
+			</Box>
+			<Divider borderColor='stroke-light' mb={4} mi={16} />
+			{showOmnichannel && (
+				<>
+					<Box role='tablist' aria-orientation='vertical'>
+						{Object.values(OMNICHANNEL_GROUPS).map((group) => (
+							<RoomListFiltersItem
+								key={group}
+								title={group}
+								selected={currentTab === group}
+								icon={filtersIcons[group]}
+								onClick={() => switchSidePanelTab(group)}
+							/>
+						))}
+					</Box>
+					<Divider borderColor='stroke-light' mb={4} mi={16} />
+				</>
+			)}
+		</Box>
+	);
+});
+
+export default RoomListFilters;

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

@@ -0,0 +1,40 @@
+import { Icon, SidebarV2Item, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+// import { useUnreadDisplay } from './hooks/useUnreadDisplay';
+import type { SidePanelFiltersKeys } from '../../views/navigation/contexts/RoomsNavigationContext';
+// import { useUnreadGroupData } from '../views/navigation/contexts/RoomsNavigationContext';
+
+type SidebarFiltersItemProps = {
+	title: SidePanelFiltersKeys;
+	selected: boolean;
+	icon: IconName;
+	onClick: () => void;
+};
+
+const RoomListFiltersItem = ({ title, selected, icon, onClick }: SidebarFiltersItemProps) => {
+	const { t } = useTranslation();
+	// const unreadGroupCount = useUnreadGroupData(title);
+	// const { unreadTitle, unreadVariant, showUnread, unreadCount } = useUnreadDisplay(unreadGroupCount);
+
+	return (
+		<SidebarV2Item tabIndex={0} role='tab' selected={selected} onClick={onClick}>
+			<Icon size='x20' name={icon} />
+			<SidebarV2ItemTitle>{t(title)}</SidebarV2ItemTitle>
+			{/* {showUnread && (
+				<SidebarV2ItemBadge
+					variant={unreadVariant}
+					title={unreadTitle}
+					role='status'
+					aria-label={t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle: title })}
+				>
+					<span aria-hidden>{unreadCount.total}</span>
+				</SidebarV2ItemBadge>
+			)} */}
+		</SidebarV2Item>
+	);
+};
+
+export default memo(RoomListFiltersItem);

apps/meteor/client/sidebarv2/hooks/useTemplateByViewMode.ts

@@ -6,10 +6,10 @@ import Condensed from '../Item/Condensed';
 import Extended from '../Item/Extended';
 import Medium from '../Item/Medium';
 
-export const useTemplateByViewMode = (): ComponentType<any> => {
+export const useTemplateByViewMode = (viewMode?: string): ComponentType<any> => {
 	const sidebarViewMode = useUserPreference('sidebarViewMode');
 	return useMemo(() => {
-		switch (sidebarViewMode) {
+		switch (viewMode || sidebarViewMode) {
 			case 'extended':
 				return Extended;
 			case 'medium':
@@ -18,5 +18,5 @@ export const useTemplateByViewMode = (): ComponentType<any> => {
 			default:
 				return Condensed;
 		}
-	}, [sidebarViewMode]);
+	}, [sidebarViewMode, viewMode]);
 };

apps/meteor/client/sidepanel/SidePanel.tsx

@@ -0,0 +1,57 @@
+import { Box, Sidepanel, SidepanelHeader, SidepanelHeaderTitle, SidepanelListItem, ToggleSwitch } from '@rocket.chat/fuselage';
+import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts';
+import { memo, useId, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
+
+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 '../views/room/Sidepanel/RoomSidepanelListWrapper';
+import RoomSidepanelItem from '../views/room/Sidepanel/SidepanelItem';
+
+type SidePanelProps = {
+	headerTitle: TranslationKey;
+	onlyUnreads: boolean;
+	toggleOnlyUnreads: () => void;
+	// TODO: This can also be of type ILivechatInquiryRecord[]
+	rooms: SubscriptionWithRoom[];
+};
+
+const SidePanel = ({ headerTitle, onlyUnreads, toggleOnlyUnreads, rooms }: SidePanelProps) => {
+	const { t } = useTranslation();
+	const ref = useRef(null);
+	const unreadFieldId = useId();
+	const parentRid = useOpenedRoom();
+	const secondLevelOpenedRoom = useSecondLevelOpenedRoom() ?? parentRid;
+
+	usePreventDefault(ref);
+
+	return (
+		<Sidepanel role='tabpanel'>
+			<SidepanelHeader>
+				<SidepanelHeaderTitle>{t(headerTitle)}</SidepanelHeaderTitle>
+				<Box display='flex' alignItems='center'>
+					<Box htmlFor={unreadFieldId} is='label' fontScale='c1' mie={8}>
+						{t('Unread')}
+					</Box>
+					<ToggleSwitch id={unreadFieldId} defaultChecked={onlyUnreads} onChange={toggleOnlyUnreads} />
+				</Box>
+			</SidepanelHeader>
+			<Box pb={8} h='full' ref={ref}>
+				{rooms && rooms.length === 0 && <GenericNoResults />}
+				<VirtualizedScrollbars>
+					<Virtuoso
+						totalCount={30}
+						data={rooms}
+						components={{ Item: SidepanelListItem, List: RoomSidepanelListWrapper }}
+						itemContent={(_, data) => <RoomSidepanelItem openedRoom={secondLevelOpenedRoom} room={data} />}
+					/>
+				</VirtualizedScrollbars>
+			</Box>
+		</Sidepanel>
+	);
+};
+
+export default memo(SidePanel);

apps/meteor/client/sidepanel/SidePanelRouter.tsx

@@ -0,0 +1,33 @@
+import SidePanel from './SidePanel';
+// import SidePanelAll from './tabs/SidePanelAll';
+// import SidePanelStarred from './tabs/SidePanelStarred';
+// import { useSidePanelFilter } from '../views/navigation/contexts/RoomsNavigationContext';
+
+const SidePanelRouter = () => {
+	// const [currentTab] = useSidePanelFilter();
+
+	return <SidePanel headerTitle='All' onlyUnreads={false} rooms={[]} toggleOnlyUnreads={() => undefined} />;
+	// return <SidePanelAll currentTab='All' />;
+
+	// TODO: figure out if we need this switch
+	// switch (currentTab) {
+	// 	case SIDE_PANEL_GROUPS.ALL:
+	// 		return <SidePanelAll />;
+	// 	case SIDE_PANEL_GROUPS.STARRED:
+	// 		return <SidePanelStarred />;
+	// 	case SIDE_PANEL_GROUPS.MENTIONS:
+	// 		return null; // TODO implement tab
+	// 	case SIDE_PANEL_GROUPS.DISCUSSIONS:
+	// 		return null; // TODO implement tab
+	// 	case SIDE_PANEL_GROUPS.IN_PROGRESS:
+	// 		return null; // TODO implement tab
+	// 	case SIDE_PANEL_GROUPS.QUEUE:
+	// 		return null; // TODO implement tab
+	// 	case SIDE_PANEL_GROUPS.ON_HOLD:
+	// 		return null; // TODO implement tab
+	// 	default:
+	// 		return null;
+	// }
+};
+
+export default SidePanelRouter;

apps/meteor/client/sidepanel/index.ts

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