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

apps/meteor/client/views/navigation/NavigationRegion.tsx

@@ -0,0 +1,115 @@
+import { FocusScope } from '@react-aria/focus';
+import { css } from '@rocket.chat/css-in-js';
+import { Box } from '@rocket.chat/fuselage';
+import { useLayout, useLayoutSizes } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+
+import Sidebar from './sidebar';
+import SidePanel from './sidepanel';
+import { NAVIGATION_REGION_ID } from '../../lib/constants';
+
+const NavigationRegion = () => {
+	const {
+		isTablet,
+		sidebar,
+		sidePanel: { displaySidePanel },
+	} = useLayout();
+	const { sidebar: sidebarSize } = useLayoutSizes();
+
+	const navMobileStyle = css`
+		position: absolute;
+		user-select: none;
+		transform: translate3d(-100%, 0, 0);
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-user-drag: none;
+		touch-action: pan-y;
+		will-change: transform;
+
+		.rtl & {
+			transform: translate3d(200%, 0, 0);
+
+			&.opened {
+				box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 1px;
+				transform: translate3d(0px, 0px, 0px);
+			}
+		}
+	`;
+
+	const navRegionStyle = css`
+		position: relative;
+		z-index: 2;
+		display: flex;
+		height: 100%;
+		user-select: none;
+		transition: transform 0.3s;
+
+		&.opened {
+			box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 1px;
+			transform: translate3d(0px, 0px, 0px);
+		}
+
+		.hidden-visibility {
+			visibility: hidden;
+		}
+	`;
+
+	const navBackdropStyle = css`
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		left: 0;
+		height: 100%;
+		user-select: none;
+		transition: opacity 0.3s;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		touch-action: pan-y;
+		-webkit-user-drag: none;
+
+		&.opened {
+			width: 100%;
+			background-color: rgb(0, 0, 0);
+			opacity: 0.8;
+		}
+	`;
+
+	const sidebarWrapStyle = css`
+		width: ${sidebarSize};
+		min-width: ${sidebarSize};
+		transition: transform 0.3s;
+
+		&.collapsed {
+			transform: translateX(-${sidebarSize});
+			margin-right: -${sidebarSize};
+		}
+	`;
+
+	const showSideBar = !displaySidePanel || !isTablet;
+	const isSidebarOpen = !sidebar.isCollapsed && isTablet;
+	const hideSidePanel = sidebar.overlayed || (sidebar.isCollapsed && isTablet);
+
+	return (
+		<>
+			<Box id={NAVIGATION_REGION_ID} className={[navRegionStyle, isSidebarOpen && 'opened', isTablet && navMobileStyle].filter(Boolean)}>
+				{showSideBar && (
+					<Box className={[sidebarWrapStyle, sidebar.overlayed && !isSidebarOpen && 'collapsed hidden-visibility']}>
+						<FocusScope>
+							<Sidebar />
+						</FocusScope>
+					</Box>
+				)}
+				{displaySidePanel && (
+					<Box width='x280' className={[hideSidePanel && 'hidden-visibility']}>
+						<FocusScope>
+							<SidePanel />
+						</FocusScope>
+					</Box>
+				)}
+			</Box>
+			{isTablet && (
+				<Box className={[navBackdropStyle, !sidebar.isCollapsed && 'opened'].filter(Boolean)} onClick={() => sidebar.toggle()} />
+			)}
+		</>
+	);
+};
+
+export default memo(NavigationRegion);

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

@@ -0,0 +1,283 @@
+import { type ISubscription, type ILivechatInquiryRecord, type IRoom, isTeamRoom, isDirectMessageRoom } from '@rocket.chat/core-typings';
+import { useStableCallback, useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import { isTruthy } from '@rocket.chat/tools';
+import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts';
+import { createContext, useCallback, useContext, useEffect, useMemo } from 'react';
+
+import { useCollapsedGroups } from '../hooks/useCollapsedGroups';
+
+export const sidePanelFiltersConfig: { [Key in AllGroupsKeys]: { title: TranslationKey; icon: IconName } } = {
+	all: {
+		title: 'All',
+		icon: 'inbox',
+	},
+	favorites: {
+		title: 'Favorites',
+		icon: 'star',
+	},
+	mentions: {
+		title: 'Mentions',
+		icon: 'at',
+	},
+	discussions: {
+		title: 'Discussions',
+		icon: 'balloons',
+	},
+	inProgress: {
+		title: 'In_progress',
+		icon: 'user-arrow-right',
+	},
+	queue: {
+		title: 'Queue',
+		icon: 'burger-arrow-left',
+	},
+	onHold: {
+		title: 'On_Hold',
+		icon: 'pause-unfilled',
+	},
+	teams: {
+		title: 'Teams',
+		icon: 'team',
+	},
+	channels: {
+		title: 'Channels',
+		icon: 'hashtag',
+	},
+	directMessages: {
+		title: 'Direct_Messages',
+		icon: 'at',
+	},
+	unread: {
+		title: 'Unread',
+		icon: 'flag',
+	},
+	conversations: {
+		title: 'Conversations',
+		icon: 'chat',
+	},
+};
+
+export type SidePanelFiltersKeys = 'all' | 'mentions' | 'favorites' | 'discussions' | 'inProgress' | 'queue' | 'onHold';
+
+export const collapsibleFilters: SideBarFiltersKeys[] = ['unread', 'conversations', 'teams', 'channels', 'directMessages'];
+export type SidePanelFiltersUnreadKeys = `${SidePanelFiltersKeys}_unread`;
+export type SidePanelFilters = SidePanelFiltersKeys | SidePanelFiltersUnreadKeys;
+
+export type SideBarFiltersKeys = 'teams' | 'channels' | 'directMessages' | 'conversations' | 'unread';
+export type SideBarFiltersUnreadKeys = `${SideBarFiltersKeys}_unread`;
+export type SideBarFilters = SidePanelFiltersKeys | SidePanelFiltersUnreadKeys;
+
+export type AllGroupsKeys = SidePanelFiltersKeys | SideBarFiltersKeys;
+
+export type AllGroupsKeysWithUnread = SidePanelFilters | SideBarFiltersKeys | SideBarFiltersUnreadKeys;
+
+export type RecordTypeBySidebarKey<K extends AllGroupsKeysWithUnread> = K extends 'queue' ? ILivechatInquiryRecord : SubscriptionWithRoom;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export interface RoomsNavigationGroup extends Map<AllGroupsKeysWithUnread, Set<RecordTypeBySidebarKey<AllGroupsKeysWithUnread>>> {
+	get<K extends AllGroupsKeysWithUnread>(key: K): Set<RecordTypeBySidebarKey<K>> | undefined;
+}
+
+export type RoomsNavigationContextValue = {
+	groups: RoomsNavigationGroup;
+	currentFilter: AllGroupsKeysWithUnread;
+	setFilter: (filter: AllGroupsKeys, unread: boolean, parentRid?: IRoom['_id']) => void;
+	unreadGroupData: Map<AllGroupsKeys, GroupedUnreadInfoData>;
+	parentRid?: IRoom['_id'];
+};
+
+export type GroupedUnreadInfoData = {
+	userMentions: number;
+	groupMentions: number;
+	tunread: string[];
+	tunreadUser: string[];
+	unread: number;
+};
+
+export const RoomsNavigationContext = createContext<RoomsNavigationContextValue | undefined>(undefined);
+
+export const useRoomsListContext = () => {
+	const contextValue = useContext(RoomsNavigationContext);
+
+	if (!contextValue) {
+		throw new Error('useRoomsListContext must be used within a RoomsNavigationContext');
+	}
+
+	return contextValue;
+};
+
+// Helper functions
+export const splitFilter = (currentFilter: AllGroupsKeysWithUnread): [SidePanelFiltersKeys, boolean] => {
+	const [currentTab, unread] = currentFilter.split('_');
+	return [currentTab as SidePanelFiltersKeys, unread === 'unread'];
+};
+
+export const getFilterKey = (tab: AllGroupsKeys, unread: boolean): AllGroupsKeysWithUnread => {
+	return unread ? `${tab}_unread` : tab;
+};
+
+export const getEmptyUnreadInfo = (): GroupedUnreadInfoData => ({
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: [],
+	tunreadUser: [],
+	unread: 0,
+});
+
+// Hooks
+type RoomListGroup<T extends AllGroupsKeys> = {
+	group: T;
+	rooms: Array<T extends SideBarFiltersKeys ? SubscriptionWithRoom : ILivechatInquiryRecord>;
+	unreadInfo: GroupedUnreadInfoData;
+};
+
+export const useSideBarRoomsList = (): {
+	roomListGroups: RoomListGroup<SideBarFiltersKeys>[];
+	groupCounts: number[];
+	totalCount: number;
+} & ReturnType<typeof useCollapsedGroups> => {
+	const { collapsedGroups, handleClick, handleKeyDown } = useCollapsedGroups();
+	const { groups, unreadGroupData } = useRoomsListContext();
+
+	const roomListGroups = collapsibleFilters
+		.map((group) => {
+			const roomSet = (groups as Map<SideBarFiltersKeys, Set<SubscriptionWithRoom>>).get(group);
+			const rooms = roomSet ? Array.from(roomSet) : [];
+			const unreadInfo = unreadGroupData.get(group) || getEmptyUnreadInfo();
+
+			if (!rooms.length) {
+				return undefined;
+			}
+
+			return { group, rooms, unreadInfo };
+		})
+		.filter(isTruthy);
+
+	const groupCounts = roomListGroups.map((group) => {
+		if (collapsedGroups.includes(group.group)) {
+			return 0;
+		}
+		return group.rooms.length;
+	});
+
+	return {
+		collapsedGroups,
+		handleClick,
+		handleKeyDown,
+		roomListGroups,
+		groupCounts,
+		totalCount: groupCounts.reduce((acc, count) => acc + count, 0),
+	};
+};
+
+export const isUnreadSubscription = (subscription: Partial<ISubscription>): boolean => {
+	if (subscription.hideUnreadStatus) {
+		return false;
+	}
+
+	return Boolean(
+		subscription.userMentions ||
+		subscription.groupMentions ||
+		subscription.tunread?.length ||
+		subscription.tunreadUser?.length ||
+		subscription.unread ||
+		subscription.alert,
+	);
+};
+
+export const useSidePanelQueueListTab = (): Array<ILivechatInquiryRecord> => {
+	return Array.from(useRoomsListContext().groups.get('queue') || []);
+};
+
+export const useSidePanelRoomsListTab = <K extends Exclude<AllGroupsKeys, 'queue'>>(tab: K): Array<RecordTypeBySidebarKey<K>> => {
+	const [, unread] = useSidePanelFilter();
+	const roomSet = useRoomsListContext().groups.get(tab);
+
+	const roomsList = useMemo(() => {
+		if (!roomSet) {
+			return [];
+		}
+
+		if (!unread) {
+			return Array.from(roomSet);
+		}
+
+		return Array.from(roomSet)
+			.reduce(
+				(result, room) => {
+					if (isUnreadSubscription(room)) {
+						result[0].push(room);
+						return result;
+					}
+
+					result[1].push(room);
+					return result;
+				},
+				[[], []] as [Array<RecordTypeBySidebarKey<K>>, Array<RecordTypeBySidebarKey<K>>],
+			)
+			.flat();
+	}, [roomSet, unread]);
+	return roomsList;
+};
+
+export const useSidePanelFilter = (): [AllGroupsKeys, boolean, AllGroupsKeysWithUnread, (filter: AllGroupsKeysWithUnread) => void] => {
+	const [currentFilter, setCurrentFilter] = useLocalStorage<AllGroupsKeysWithUnread>('sidePanelFilters', getFilterKey('all', false));
+	return [...splitFilter(currentFilter), currentFilter, setCurrentFilter];
+};
+
+export const useUnreadOnlyToggle = (): [boolean, () => void] => {
+	const { setFilter, parentRid } = useRoomsListContext();
+	const [currentTab, unread] = useSidePanelFilter();
+
+	return [unread, useStableCallback(() => setFilter(currentTab, !unread, parentRid))];
+};
+
+export const useSwitchSidePanelTab = () => {
+	const { setFilter } = useRoomsListContext();
+	const [, unread] = useSidePanelFilter();
+
+	return (tab: AllGroupsKeys, { parentRid }: { parentRid?: IRoom['_id'] } = {}) => {
+		setFilter(tab, unread, parentRid);
+	};
+};
+
+export const useUnreadGroupData = (key: SidePanelFiltersKeys) => useRoomsListContext().unreadGroupData.get(key) || getEmptyUnreadInfo();
+
+export const useIsRoomFilter = () => {
+	const [currentTab] = useSidePanelFilter();
+	return useMemo(() => collapsibleFilters.some((group) => currentTab === group), [currentTab]);
+};
+
+export const useRedirectToDefaultTab = (shouldRedirect: boolean) => {
+	const switchSidePanelTab = useSwitchSidePanelTab();
+
+	useEffect(() => {
+		if (shouldRedirect) {
+			switchSidePanelTab('all');
+		}
+	}, [shouldRedirect, switchSidePanelTab]);
+};
+
+export const useRedirectToFilter = () => {
+	const switchSidePanelTab = useSwitchSidePanelTab();
+
+	const handleRedirect = useCallback(
+		(room: SubscriptionWithRoom) => {
+			if (isTeamRoom(room)) {
+				switchSidePanelTab('teams', { parentRid: room.rid });
+				return;
+			}
+
+			if (isDirectMessageRoom(room)) {
+				switchSidePanelTab('directMessages', { parentRid: room.rid });
+				return;
+			}
+
+			switchSidePanelTab('channels', { parentRid: room.prid || room.rid });
+		},
+		[switchSidePanelTab],
+	);
+
+	return handleRedirect;
+};

apps/meteor/client/views/navigation/hooks/useCollapsedGroups.ts

@@ -0,0 +1,30 @@
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import type { KeyboardEvent } from 'react';
+import { useCallback } from 'react';
+
+export const useCollapsedGroups = () => {
+	const [collapsedGroups, setCollapsedGroups] = useLocalStorage<string[]>('sidebarGroups', []);
+
+	const handleClick = useCallback(
+		(group: string) => {
+			if (collapsedGroups.includes(group)) {
+				setCollapsedGroups(collapsedGroups.filter((item) => item !== group));
+			} else {
+				setCollapsedGroups([...collapsedGroups, group]);
+			}
+		},
+		[collapsedGroups, setCollapsedGroups],
+	);
+
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent, group: string) => {
+			if (['Enter', 'Space'].includes(event.code)) {
+				event.preventDefault();
+				handleClick(group);
+			}
+		},
+		[handleClick],
+	);
+
+	return { collapsedGroups, handleClick, handleKeyDown };
+};

apps/meteor/client/views/navigation/hooks/useSidePanelParentRid.ts

@@ -0,0 +1,16 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { useStableCallback, useLocalStorage } from '@rocket.chat/fuselage-hooks';
+
+import { collapsibleFilters, type AllGroupsKeys } from '../contexts/RoomsNavigationContext';
+
+export const useSidePanelParentRid = () => {
+	const [parentRid, setParentRid] = useLocalStorage<IRoom['_id'] | undefined>('sidePanelParentRid', undefined);
+
+	const setParentRoom = useStableCallback((filter: AllGroupsKeys, parentRid: IRoom['_id'] | undefined) => {
+		if (collapsibleFilters.some((group) => filter === group)) {
+			setParentRid(parentRid);
+		}
+	});
+
+	return { parentRid, setParentRoom };
+};

apps/meteor/client/views/navigation/index.ts

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

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

@@ -0,0 +1,231 @@
+import { isDirectMessageRoom, isDiscussion, isOmnichannelRoom, isPrivateRoom, isPublicRoom, isTeamRoom } from '@rocket.chat/core-typings';
+import type { ILivechatInquiryRecord, IRoom } from '@rocket.chat/core-typings';
+import { useDebouncedValue, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts';
+import { useSetting, useUserPreference, useUserSubscriptions, useLayout } from '@rocket.chat/ui-contexts';
+import type { ReactNode } from 'react';
+import { useEffect, useMemo } from 'react';
+
+import { useSortQueryOptions } from '../../../hooks/useSortQueryOptions';
+import { RoomManager } from '../../../lib/RoomManager';
+import { Rooms } from '../../../stores';
+import { useOmnichannelEnabled } from '../../omnichannel/hooks/useOmnichannelEnabled';
+import { useQueuedInquiries } from '../../omnichannel/hooks/useQueuedInquiries';
+import type {
+	GroupedUnreadInfoData,
+	AllGroupsKeys,
+	AllGroupsKeysWithUnread,
+	RoomsNavigationGroup,
+} from '../contexts/RoomsNavigationContext';
+import {
+	RoomsNavigationContext,
+	getEmptyUnreadInfo,
+	getFilterKey,
+	isUnreadSubscription,
+	useSidePanelFilter,
+} from '../contexts/RoomsNavigationContext';
+import { useSidePanelParentRid } from '../hooks/useSidePanelParentRid';
+
+const query = { open: { $ne: false } };
+
+const emptyQueue: ILivechatInquiryRecord[] = [];
+
+export type useRoomsGroupsReturnType = {
+	sideBar: {
+		roomList: Array<SubscriptionWithRoom>;
+		groupsCount: number[];
+		groupsList: TranslationKey[];
+		groupedUnreadInfo: GroupedUnreadInfoData[];
+	};
+};
+
+const updateGroupUnreadInfo = (room: SubscriptionWithRoom, current: GroupedUnreadInfoData): GroupedUnreadInfoData => {
+	return {
+		...current,
+		userMentions: current.userMentions + (room.userMentions || 0),
+		groupMentions: current.groupMentions + (room.groupMentions || 0),
+		tunread: [...current.tunread, ...(room.tunread || [])],
+		tunreadUser: [...current.tunreadUser, ...(room.tunreadUser || [])],
+		unread: current.unread + (room.unread || (!room.unread && !room.tunread?.length && room.alert ? 1 : 0)),
+	};
+};
+
+const hasMention = (room: SubscriptionWithRoom) =>
+	room.userMentions || room.groupMentions || room.tunreadUser?.length || room.tunreadGroup?.length;
+
+type UnreadGroupDataMap = Map<AllGroupsKeys, GroupedUnreadInfoData>;
+
+const useRoomsGroups = (): [RoomsNavigationGroup, UnreadGroupDataMap] => {
+	const showOmnichannel = useOmnichannelEnabled();
+	const sidebarShowUnread = useUserPreference('sidebarShowUnread');
+	const sidebarGroupByType = useUserPreference('sidebarGroupByType');
+	const isDiscussionEnabled = useSetting('Discussion_enabled');
+	const options = useSortQueryOptions();
+
+	const rooms = useUserSubscriptions(query, options);
+
+	const inquiries = useQueuedInquiries();
+	const queue = inquiries.enabled ? inquiries.queue : emptyQueue;
+
+	return useDebouncedValue(
+		useMemo(() => {
+			const groups: RoomsNavigationGroup = new Map();
+			showOmnichannel && groups.set('queue', new Set(queue));
+
+			const unreadGroupData: UnreadGroupDataMap = new Map();
+
+			const setGroupRoom = (key: AllGroupsKeys, room: SubscriptionWithRoom) => {
+				const getGroupSet = (key: AllGroupsKeysWithUnread) => {
+					const roomSet = groups.get(key) || new Set<SubscriptionWithRoom>();
+					if (!groups.has(key)) {
+						groups.set(key, roomSet);
+					}
+					return roomSet;
+				};
+
+				getGroupSet(key).add(room);
+
+				if (isUnreadSubscription(room)) {
+					// getGroupSet(`${key}_unread`).add(room);
+
+					const currentUnreadData = unreadGroupData.get(key) || getEmptyUnreadInfo();
+					const unreadInfo = updateGroupUnreadInfo(room, currentUnreadData);
+					unreadGroupData.set(key, unreadInfo);
+				}
+			};
+
+			rooms.forEach((room) => {
+				if (room.archived) {
+					return;
+				}
+
+				if (isOmnichannelRoom(room) && showOmnichannel) {
+					if (room.onHold) {
+						return setGroupRoom('onHold', room);
+					}
+
+					return setGroupRoom('inProgress', room);
+				}
+
+				setGroupRoom('all', room);
+
+				if (hasMention(room)) {
+					setGroupRoom('mentions', room);
+				}
+
+				if (room.f) {
+					setGroupRoom('favorites', room);
+				}
+
+				if (isDiscussionEnabled && isDiscussion(room)) {
+					setGroupRoom('discussions', room);
+					return;
+				}
+
+				if (sidebarShowUnread && isUnreadSubscription(room)) {
+					setGroupRoom('unread', room);
+					return;
+				}
+
+				if (!sidebarGroupByType) {
+					setGroupRoom('conversations', room);
+					return;
+				}
+
+				if (isTeamRoom(room)) {
+					setGroupRoom('teams', room);
+				}
+
+				if ((isPrivateRoom(room) || isPublicRoom(room)) && !isDiscussion(room) && !isTeamRoom(room)) {
+					setGroupRoom('channels', room);
+				}
+
+				if (isDirectMessageRoom(room)) {
+					setGroupRoom('directMessages', room);
+				}
+			});
+
+			return [groups, unreadGroupData];
+		}, [showOmnichannel, queue, rooms, sidebarShowUnread, sidebarGroupByType, isDiscussionEnabled]),
+		50,
+	);
+};
+
+export type RoomsNavigationContextProviderProps = { children: ReactNode };
+
+const RoomsNavigationContextProvider = ({ children }: RoomsNavigationContextProviderProps) => {
+	const {
+		sidePanel: { openSidePanel },
+	} = useLayout();
+	const { setParentRoom, parentRid } = useSidePanelParentRid();
+
+	const [currentFilter, unread, , setCurrentFilter] = useSidePanelFilter();
+
+	const setFilter = useStableCallback((filter: AllGroupsKeys, unread: boolean, parentRid?: IRoom['_id']) => {
+		openSidePanel();
+		setCurrentFilter(getFilterKey(filter, unread));
+		setParentRoom(filter, parentRid);
+	});
+
+	const [groups, unreadGroupData] = useRoomsGroups();
+
+	const handleRoomOpened = useStableCallback((rid: string) => {
+		const room = Rooms.use.getState().find((r) => r._id === rid);
+
+		if (!room) {
+			return;
+		}
+
+		if (!['teams', 'channels', 'directMessages'].includes(currentFilter)) {
+			return;
+		}
+
+		if (isTeamRoom(room)) {
+			setFilter('teams', unread, rid);
+			return;
+		}
+
+		if (isDirectMessageRoom(room)) {
+			setFilter('directMessages', unread, rid);
+			return;
+		}
+
+		if (room.teamId && currentFilter === 'teams') {
+			const teamRid = Rooms.use.getState().find((r) => Boolean(r.teamId === room.teamId && r.teamMain))?._id;
+
+			/**
+			 * if the room is the parent rid is still the same, don't change the filter
+			 * the filter decision is going to be done by `useRedirectToFilter` when the item is clicked
+			 **/
+			if (parentRid === teamRid) {
+				return;
+			}
+			setFilter('teams', unread, teamRid);
+			return;
+		}
+
+		if (room.prid) {
+			const parentRoom = Rooms.use.getState().find((r) => Boolean(r._id === room.prid));
+			setFilter(parentRoom?.teamMain ? 'teams' : 'channels', unread, parentRoom?._id);
+			return;
+		}
+
+		setFilter('channels', unread, rid);
+	});
+
+	useEffect(() => RoomManager.on('opened', handleRoomOpened), [handleRoomOpened]);
+
+	const contextValue = useMemo(() => {
+		return {
+			currentFilter,
+			setFilter,
+			groups,
+			unreadGroupData,
+			parentRid,
+		};
+	}, [parentRid, currentFilter, setFilter, groups, unreadGroupData]);
+
+	return <RoomsNavigationContext.Provider value={contextValue}>{children}</RoomsNavigationContext.Provider>;
+};
+
+export default RoomsNavigationContextProvider;

apps/meteor/client/views/navigation/sidebar/RoomList/OmnichannelFilters.tsx

@@ -0,0 +1,29 @@
+import { Box, Divider } from '@rocket.chat/fuselage';
+import { usePermission } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import RoomListFiltersItem from './RoomListFiltersItem';
+import { sidePanelFiltersConfig } from '../../contexts/RoomsNavigationContext';
+
+const OmnichannelFilters = () => {
+	const { t } = useTranslation();
+	const hasAccess = usePermission('view-l-room');
+	const canViewOmnichannelQueue = usePermission('view-livechat-queue');
+
+	if (!hasAccess) {
+		return null;
+	}
+
+	return (
+		<>
+			<Box role='tablist' aria-label={t('Omnichannel_filters')} aria-orientation='vertical'>
+				<RoomListFiltersItem group='inProgress' icon={sidePanelFiltersConfig.inProgress.icon} />
+				{canViewOmnichannelQueue && <RoomListFiltersItem group='queue' icon={sidePanelFiltersConfig.queue.icon} />}
+				<RoomListFiltersItem group='onHold' icon={sidePanelFiltersConfig.onHold.icon} />
+			</Box>
+			<Divider borderColor='stroke-light' marginBlock={4} marginInline={16} />
+		</>
+	);
+};
+
+export default OmnichannelFilters;

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

@@ -0,0 +1,74 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import { VirtualizedScrollbars } from '@rocket.chat/ui-client';
+import { 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 { useOpenedRoom } from '../../../../lib/RoomManager';
+import { useSideBarRoomsList, sidePanelFiltersConfig } from '../../contexts/RoomsNavigationContext';
+import { usePreventDefault } from '../hooks/usePreventDefault';
+import { useShortcutOpenMenu } from '../hooks/useShortcutOpenMenu';
+
+const RoomList = () => {
+	const { t } = useTranslation();
+	const isAnonymous = !useUserId();
+
+	const { roomListGroups, groupCounts, collapsedGroups, handleClick, handleKeyDown, totalCount } = useSideBarRoomsList();
+	const { ref } = useResizeObserver<HTMLElement>({ debounceDelay: 100 });
+	const openedRoom = useOpenedRoom() ?? '';
+
+	const itemData = useMemo(
+		() => ({
+			t,
+			openedRoom,
+			isAnonymous,
+		}),
+		[isAnonymous, openedRoom, t],
+	);
+
+	usePreventDefault(ref);
+	useShortcutOpenMenu(ref);
+
+	return (
+		<Box position='relative' overflow='hidden' height='full' ref={ref}>
+			<VirtualizedScrollbars>
+				<GroupedVirtuoso
+					groupCounts={groupCounts}
+					groupContent={(index) => {
+						const { group, unreadInfo } = roomListGroups[index];
+
+						return (
+							<RoomListCollapser
+								collapsedGroups={collapsedGroups}
+								onClick={() => handleClick(group)}
+								onKeyDown={(e) => handleKeyDown(e, group)}
+								groupTitle={sidePanelFiltersConfig[group].title}
+								group={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);
+							return <RoomListRow data={itemData} item={rooms[correctedIndex]} />;
+						},
+					})}
+					components={{ Header: RoomsListFilters, Item: RoomListRowWrapper, List: RoomListWrapper }}
+				/>
+			</VirtualizedScrollbars>
+		</Box>
+	);
+};
+
+export default RoomList;

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

@@ -0,0 +1,41 @@
+import type { ISubscription } from '@rocket.chat/core-typings';
+import { Badge, SidebarCollapseGroup } from '@rocket.chat/fuselage';
+import type { HTMLAttributes, KeyboardEvent, MouseEventHandler } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { AllGroupsKeys } from '../../contexts/RoomsNavigationContext';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+export type RoomListCollapserProps = {
+	group: AllGroupsKeys;
+	groupTitle: string;
+	collapsedGroups: string[];
+	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, group, ...props }: RoomListCollapserProps) => {
+	const { t } = useTranslation();
+
+	const { unreadTitle, unreadVariant, showUnread, unreadCount } = useUnreadDisplay(unreadGroupCount);
+	return (
+		<SidebarCollapseGroup
+			title={t(groupTitle)}
+			expanded={!collapsedGroups.includes(group)}
+			badge={
+				showUnread ? (
+					<Badge variant={unreadVariant} title={unreadTitle} aria-label={unreadTitle} role='status'>
+						{unreadCount.total}
+					</Badge>
+				) : undefined
+			}
+			aria-label={
+				!collapsedGroups.includes(group) ? t('Collapse_group', { group: t(groupTitle) }) : t('Expand_group', { group: t(groupTitle) })
+			}
+			{...props}
+		/>
+	);
+};
+
+export default RoomListCollapser;

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListFilters.tsx

@@ -0,0 +1,20 @@
+import { Box } from '@rocket.chat/fuselage';
+import { forwardRef } from 'react';
+import type { Components } from 'react-virtuoso';
+
+import OmnichannelFilters from './OmnichannelFilters';
+import TeamCollabFilters from './TeamCollabFilters';
+import { useOmnichannelEnabled } from '../../../omnichannel/hooks/useOmnichannelEnabled';
+
+const RoomListFilters: Components['Header'] = forwardRef(function RoomListWrapper(_, ref) {
+	const showOmnichannel = useOmnichannelEnabled();
+
+	return (
+		<Box ref={ref} display='flex' flexDirection='column'>
+			<TeamCollabFilters />
+			{showOmnichannel && <OmnichannelFilters />}
+		</Box>
+	);
+});
+
+export default RoomListFilters;

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListFiltersItem.tsx

@@ -0,0 +1,50 @@
+import { Icon, SidebarItem, SidebarItemIcon, SidebarItemTitle } from '@rocket.chat/fuselage';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import RoomListFiltersItemBadge from './RoomListFiltersItemBadge';
+import {
+	type SidePanelFiltersKeys,
+	sidePanelFiltersConfig,
+	useSidePanelFilter,
+	useSwitchSidePanelTab,
+} from '../../contexts/RoomsNavigationContext';
+import { useUnreadGroupData } from '../../contexts/RoomsNavigationContext';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+type SidebarFiltersItemProps = {
+	group: SidePanelFiltersKeys;
+	icon: IconName;
+};
+
+const RoomListFiltersItem = ({ group, icon }: SidebarFiltersItemProps) => {
+	const { t } = useTranslation();
+	const switchSidePanelTab = useSwitchSidePanelTab();
+
+	const unreadGroupCount = useUnreadGroupData(group);
+	const buttonProps = useButtonPattern((e) => {
+		e.preventDefault();
+		switchSidePanelTab(group);
+	});
+	const [currentTab] = useSidePanelFilter();
+	const roomTitle = sidePanelFiltersConfig[group].title;
+	const { unreadTitle, showUnread, highlightUnread: highlighted } = useUnreadDisplay(unreadGroupCount);
+
+	return (
+		<SidebarItem
+			aria-label={showUnread ? t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle }) : roomTitle}
+			selected={group === currentTab}
+			aria-selected={group === currentTab}
+			{...buttonProps}
+			role='tab'
+		>
+			<SidebarItemIcon highlighted={highlighted} icon={<Icon size='x20' name={icon} />} />
+			<SidebarItemTitle unread={highlighted}>{t(roomTitle)}</SidebarItemTitle>
+			{showUnread && <RoomListFiltersItemBadge roomTitle={roomTitle} unreadGroupCount={unreadGroupCount} />}
+		</SidebarItem>
+	);
+};
+
+export default memo(RoomListFiltersItem);

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListFiltersItemBadge.tsx

@@ -0,0 +1,37 @@
+import { SidebarItemBadge } from '@rocket.chat/fuselage';
+import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+export type RoomListFiltersItemBadgeProps = {
+	roomTitle: TranslationKey;
+	unreadGroupCount: Pick<
+		SubscriptionWithRoom,
+		'alert' | 'userMentions' | 'unread' | 'tunread' | 'tunreadUser' | 'groupMentions' | 'hideMentionStatus' | 'hideUnreadStatus'
+	>;
+};
+
+/**
+ * TODO: This component can be optimized and used in multiple places.
+ * The usage of the <span> to handle properly the aria label together with the
+ * unread number could be moved to fuselage
+ **/
+
+const RoomListFiltersItemBadge = ({ roomTitle, unreadGroupCount }: RoomListFiltersItemBadgeProps) => {
+	const { t } = useTranslation();
+	const { unreadTitle, unreadVariant, unreadCount } = useUnreadDisplay(unreadGroupCount);
+
+	return (
+		<SidebarItemBadge
+			variant={unreadVariant}
+			title={unreadTitle}
+			role='status'
+			aria-label={t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle })}
+		>
+			<span aria-hidden>{unreadCount.total}</span>
+		</SidebarItemBadge>
+	);
+};
+
+export default RoomListFiltersItemBadge;

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListRow.tsx

@@ -0,0 +1,37 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { useVideoConfAcceptCall, useVideoConfRejectIncomingCall, useVideoConfIncomingCalls } from '@rocket.chat/ui-video-conf';
+import type { TFunction } from 'i18next';
+import { memo, useMemo } from 'react';
+
+import SidebarItemWithData from './SidebarItemWithData';
+
+export type RoomListRowProps = {
+	data: {
+		t: TFunction;
+		openedRoom: string;
+		isAnonymous: boolean;
+	};
+	item: SubscriptionWithRoom;
+};
+
+const RoomListRow = ({ data, item }: RoomListRowProps) => {
+	const { t } = data;
+
+	const acceptCall = useVideoConfAcceptCall();
+	const rejectCall = useVideoConfRejectIncomingCall();
+	const incomingCalls = useVideoConfIncomingCalls();
+	const currentCall = incomingCalls.find((call) => call.rid === item.rid);
+
+	const videoConfActions = useMemo(
+		() =>
+			currentCall && {
+				acceptCall: (): void => acceptCall(currentCall.callId),
+				rejectCall: (): void => rejectCall(currentCall.callId),
+			},
+		[acceptCall, rejectCall, currentCall],
+	);
+
+	return <SidebarItemWithData t={t} room={item} videoConfActions={videoConfActions} />;
+};
+
+export default memo(RoomListRow);

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListRowWrapper.tsx

@@ -0,0 +1,11 @@
+import { SidebarListItem } from '@rocket.chat/fuselage';
+import type { ForwardedRef, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export type RoomListRoomWrapperProps = HTMLAttributes<HTMLDivElement>;
+
+const RoomListRoomWrapper = forwardRef(function RoomListRoomWrapper(props: RoomListRoomWrapperProps, ref: ForwardedRef<HTMLDivElement>) {
+	return <SidebarListItem ref={ref} {...props} />;
+});
+
+export default RoomListRoomWrapper;

apps/meteor/client/views/navigation/sidebar/RoomList/RoomListWrapper.tsx

@@ -0,0 +1,18 @@
+import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
+import type { ForwardedRef, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSidebarListNavigation } from './useSidebarListNavigation';
+
+export type RoomListWrapperProps = HTMLAttributes<HTMLDivElement>;
+
+const RoomListWrapper = forwardRef(function RoomListWrapper(props: RoomListWrapperProps, ref: ForwardedRef<HTMLDivElement>) {
+	const { t } = useTranslation();
+	const { sidebarListRef } = useSidebarListNavigation();
+	const mergedRefs = useMergedRefs(ref, sidebarListRef);
+
+	return <div role='list' aria-label={t('Channels')} ref={mergedRefs} {...props} />;
+});
+
+export default RoomListWrapper;

apps/meteor/client/views/navigation/sidebar/RoomList/SidebarItem.tsx

@@ -0,0 +1,55 @@
+import {
+	IconButton,
+	SidebarItem as FuselageSidebarItem,
+	SidebarItemAvatarWrapper,
+	SidebarItemMenu,
+	SidebarItemTitle,
+} from '@rocket.chat/fuselage';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { memo } from 'react';
+
+import { useDeferredMenuMount } from '../../../../sidebar/Item/useDeferredMenuMount';
+
+export type SidebarItemProps = {
+	title: ReactNode;
+	titleIcon?: ReactNode;
+	icon?: ReactNode;
+	actions?: ReactNode;
+	href?: string;
+	unread?: boolean;
+	menu?: ReactNode;
+	menuOptions?: any;
+	selected?: boolean;
+	badges?: ReactNode;
+	clickable?: boolean;
+	room: SubscriptionWithRoom;
+} & Omit<HTMLAttributes<HTMLAnchorElement>, 'is'>;
+
+const SidebarItem = ({ icon, title, actions, unread, menu, badges, room, ...props }: SidebarItemProps) => {
+	const { mounted: menuVisibility, requestMount, mountNow } = useDeferredMenuMount();
+
+	return (
+		<FuselageSidebarItem {...props} onFocus={mountNow} onPointerEnter={requestMount} aria-selected={props.selected}>
+			<SidebarItemAvatarWrapper>
+				<RoomAvatar size='x20' room={{ ...room, _id: room.rid || room._id, type: room.t }} />
+			</SidebarItemAvatarWrapper>
+			{icon}
+			<SidebarItemTitle unread={unread}>{title}</SidebarItemTitle>
+			{badges}
+			{actions}
+			{menu && (
+				<SidebarItemMenu>
+					{menuVisibility ? (
+						menu
+					) : (
+						<IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' onPointerDown={mountNow} />
+					)}
+				</SidebarItemMenu>
+			)}
+		</FuselageSidebarItem>
+	);
+};
+
+export default memo(SidebarItem);

apps/meteor/client/views/navigation/sidebar/RoomList/SidebarItemWithData.tsx

@@ -0,0 +1,136 @@
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { SidebarAction, SidebarActions, SidebarItemIcon } from '@rocket.chat/fuselage';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { useUserId } from '@rocket.chat/ui-contexts';
+import type { TFunction } from 'i18next';
+import type { AllHTMLAttributes } from 'react';
+import { memo, useMemo } from 'react';
+
+import SidebarItem from './SidebarItem';
+import { RoomIcon } from '../../../../components/RoomIcon';
+import { useUserStatusTooltip } from '../../../../hooks/useUserStatusTooltip';
+import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
+import { getUidDirectMessage } from '../../../../lib/utils/getUidDirectMessage';
+import { useRoomsListContext, useIsRoomFilter, useRedirectToFilter } from '../../contexts/RoomsNavigationContext';
+import SidebarItemBadges from '../badges/SidebarItemBadges';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+type RoomListRowProps = {
+	t: TFunction;
+	openedRoom?: string;
+	isAnonymous?: boolean;
+
+	room: SubscriptionWithRoom;
+	id?: string;
+	/* @deprecated */
+	style?: AllHTMLAttributes<HTMLElement>['style'];
+
+	videoConfActions?: {
+		[action: string]: () => void;
+	};
+};
+
+const SidebarItemWithData = ({ room, id, style, t, videoConfActions }: RoomListRowProps) => {
+	const title = roomCoordinator.getRoomName(room.t, room) || '';
+	const href = roomCoordinator.getRouteLink(room.t, room) || '';
+
+	const dmUserId = getUidDirectMessage(room, useUserId());
+	const dmStatusTooltipHandlers = useUserStatusTooltip(dmUserId, title);
+
+	const { unreadTitle, showUnread, highlightUnread: highlighted } = useUnreadDisplay(room);
+
+	const icon = (
+		<SidebarItemIcon
+			highlighted={highlighted}
+			icon={<RoomIcon room={room} placement='sidebar' size='x20' isIncomingCall={Boolean(videoConfActions)} />}
+		/>
+	);
+
+	const actions = useMemo(
+		() =>
+			videoConfActions && (
+				<SidebarActions>
+					<SidebarAction onClick={videoConfActions.acceptCall} mini secondary success icon='phone' />
+					<SidebarAction onClick={videoConfActions.rejectCall} mini secondary danger icon='phone-off' />
+				</SidebarActions>
+			),
+		[videoConfActions],
+	);
+
+	const { parentRid } = useRoomsListContext();
+
+	const isRoomFilter = useIsRoomFilter();
+
+	const selected = isRoomFilter && room.rid === parentRid;
+
+	const redirectToFilter = useRedirectToFilter();
+	const buttonProps = useButtonPattern(() => redirectToFilter(room));
+
+	return (
+		<SidebarItem
+			id={id}
+			data-unread={highlighted}
+			unread={highlighted}
+			href={href}
+			selected={selected}
+			aria-label={showUnread ? t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle: title }) : title}
+			title={title}
+			icon={icon}
+			style={style}
+			badges={<SidebarItemBadges room={room} roomTitle={title} />}
+			room={room}
+			actions={actions}
+			{...buttonProps}
+			{...dmStatusTooltipHandlers}
+		/>
+	);
+};
+
+function safeDateNotEqualCheck(a: Date | string | undefined, b: Date | string | undefined): boolean {
+	if (!a || !b) {
+		return a !== b;
+	}
+	return new Date(a).toISOString() !== new Date(b).toISOString();
+}
+
+const keys: (keyof RoomListRowProps)[] = ['id', 'style', 't', 'videoConfActions'];
+
+export default memo(SidebarItemWithData, (prevProps, nextProps) => {
+	if (keys.some((key) => prevProps[key] !== nextProps[key])) {
+		return false;
+	}
+
+	if (prevProps.room === nextProps.room) {
+		return true;
+	}
+
+	if (prevProps.room._id !== nextProps.room._id) {
+		return false;
+	}
+	if (prevProps.room._updatedAt?.toISOString() !== nextProps.room._updatedAt?.toISOString()) {
+		return false;
+	}
+	if (safeDateNotEqualCheck(prevProps.room.lastMessage?._updatedAt, nextProps.room.lastMessage?._updatedAt)) {
+		return false;
+	}
+	if (prevProps.room.alert !== nextProps.room.alert) {
+		return false;
+	}
+	if (isOmnichannelRoom(prevProps.room) && isOmnichannelRoom(nextProps.room) && prevProps.room?.v?.status !== nextProps.room?.v?.status) {
+		return false;
+	}
+	if (prevProps.room.teamMain !== nextProps.room.teamMain) {
+		return false;
+	}
+
+	if (
+		isOmnichannelRoom(prevProps.room) &&
+		isOmnichannelRoom(nextProps.room) &&
+		prevProps.room.priorityWeight !== nextProps.room.priorityWeight
+	) {
+		return false;
+	}
+
+	return true;
+});

apps/meteor/client/views/navigation/sidebar/RoomList/TeamCollabFilters.tsx

@@ -0,0 +1,24 @@
+import { Divider, Box } from '@rocket.chat/fuselage';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import RoomListFiltersItem from './RoomListFiltersItem';
+import { sidePanelFiltersConfig } from '../../contexts/RoomsNavigationContext';
+
+const TeamCollabFilters = () => {
+	const { t } = useTranslation();
+	const isDiscussionEnabled = useSetting('Discussion_enabled');
+
+	return (
+		<>
+			<Box role='tablist' aria-label={t('Team_collaboration_filters')} aria-orientation='vertical'>
+				<RoomListFiltersItem group='all' icon={sidePanelFiltersConfig.all.icon} />
+				<RoomListFiltersItem group='favorites' icon={sidePanelFiltersConfig.favorites.icon} />
+				{isDiscussionEnabled && <RoomListFiltersItem group='discussions' icon={sidePanelFiltersConfig.discussions.icon} />}
+			</Box>
+			<Divider borderColor='stroke-light' marginBlock={4} marginInline={16} />
+		</>
+	);
+};
+
+export default TeamCollabFilters;

apps/meteor/client/views/navigation/sidebar/RoomList/index.ts

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

apps/meteor/client/views/navigation/sidebar/RoomList/useSidebarListNavigation.ts

@@ -0,0 +1,104 @@
+import { useFocusManager } from '@react-aria/focus';
+import { useCallback } from 'react';
+
+const isListItem = (node: EventTarget) =>
+	(node as HTMLElement).classList.contains('rcx-sidebar-item') && (node as HTMLElement).parentElement?.role === 'listitem';
+const isCollapseGroup = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-collapse-group__bar');
+const isListItemMenu = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-item__menu');
+
+/**
+ * Custom hook to provide the sidebar navigation by keyboard.
+ * @returns ref - A ref to the message list DOM element.
+ */
+export const useSidebarListNavigation = () => {
+	const sidebarListFocusManager = useFocusManager();
+
+	const sidebarListRef = useCallback(
+		(node: HTMLElement | null) => {
+			let lastItemFocused: HTMLElement | null = null;
+
+			if (!node) {
+				return;
+			}
+
+			node.addEventListener('keydown', (e) => {
+				if (!e.target) {
+					return;
+				}
+
+				if (!isListItem(e.target) && !isCollapseGroup(e.target)) {
+					return;
+				}
+
+				if (e.key === 'Tab') {
+					e.preventDefault();
+					e.stopPropagation();
+
+					if (e.shiftKey) {
+						sidebarListFocusManager?.focusPrevious({
+							accept: (node) => !isListItem(node) && !isListItemMenu(node) && !isCollapseGroup(node),
+						});
+					} else if (isListItemMenu(e.target)) {
+						sidebarListFocusManager?.focusNext({
+							accept: (node) => !isListItem(node) && !isListItemMenu(node) && !isCollapseGroup(node),
+						});
+					} else {
+						sidebarListFocusManager?.focusNext({
+							accept: (node) => !isListItem(node) && !isCollapseGroup(node),
+						});
+					}
+				}
+
+				if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+					e.preventDefault();
+					e.stopPropagation();
+
+					if (e.key === 'ArrowUp') {
+						sidebarListFocusManager?.focusPrevious({ accept: (node) => isListItem(node) || isCollapseGroup(node) });
+					}
+
+					if (e.key === 'ArrowDown') {
+						sidebarListFocusManager?.focusNext({ accept: (node) => isListItem(node) || isCollapseGroup(node) });
+					}
+
+					lastItemFocused = document.activeElement as HTMLElement;
+				}
+			});
+
+			node.addEventListener(
+				'blur',
+				(e) => {
+					if (
+						!(e.relatedTarget as HTMLElement)?.matches(':focus-visible') ||
+						!(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)
+					) {
+						return;
+					}
+
+					if (!e.currentTarget.contains(e.relatedTarget) && !lastItemFocused) {
+						lastItemFocused = e.target as HTMLElement;
+					}
+				},
+				{ capture: true },
+			);
+
+			node.addEventListener(
+				'focus',
+				(e) => {
+					const triggeredByKeyboard = (e.target as HTMLElement)?.matches(':focus-visible');
+					if (!triggeredByKeyboard || !(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)) {
+						return;
+					}
+
+					if (lastItemFocused && !e.currentTarget.contains(e.relatedTarget) && node.contains(e.target as HTMLElement)) {
+						lastItemFocused?.focus();
+					}
+				},
+				{ capture: true },
+			);
+		},
+		[sidebarListFocusManager],
+	);
+
+	return { sidebarListRef };
+};

apps/meteor/client/views/navigation/sidebar/Sidebar.tsx

@@ -0,0 +1,23 @@
+import { Sidebar as FuselageSidebar } from '@rocket.chat/fuselage';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SidebarRoomList from './RoomList';
+import SidebarFooter from '../../../sidebar/footer';
+import BannerSection from '../../../sidebar/sections/BannerSection';
+import NowPlayingSection from '../../../sidebar/sections/NowPlayingSection';
+
+const Sidebar = () => {
+	const { t } = useTranslation();
+
+	return (
+		<FuselageSidebar aria-label={t('Sidebar')} className='rcx-sidebar--main rcx-sidebar'>
+			<BannerSection />
+			<SidebarRoomList />
+			<NowPlayingSection />
+			<SidebarFooter />
+		</FuselageSidebar>
+	);
+};
+
+export default memo(Sidebar);

apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.spec.tsx

@@ -0,0 +1,59 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+
+import SidebarItemBadges from './SidebarItemBadges';
+import { createFakeSubscription } from '../../../../../tests/mocks/data';
+
+describe('SidebarItemBadges', () => {
+	const appRoot = mockAppRoot()
+		.withTranslations('en', 'core', {
+			Invited__date__: 'Invited {{date}}',
+			mentions_counter_one: '{{count}} mention',
+			mentions_counter_other: '{{count}} mentions',
+			__unreadTitle__from__roomTitle__: '{{unreadTitle}} from {{roomTitle}}',
+		})
+		.build();
+
+	afterEach(() => {
+		jest.resetAllMocks();
+	});
+
+	it('should render UnreadBadge when there are unread messages', () => {
+		render(<SidebarItemBadges room={createFakeSubscription({ unread: 1, userMentions: 1, groupMentions: 0 })} roomTitle='Test Room' />, {
+			wrapper: appRoot,
+		});
+
+		expect(screen.getByRole('status', { name: '1 mention from Test Room' })).toBeInTheDocument();
+	});
+
+	it('should not render UnreadBadge when there are no unread messages', () => {
+		render(<SidebarItemBadges room={createFakeSubscription({ unread: 0, userMentions: 0, groupMentions: 0 })} roomTitle='Test Room' />, {
+			wrapper: appRoot,
+		});
+
+		expect(screen.queryByRole('status', { name: 'Test Room' })).not.toBeInTheDocument();
+	});
+
+	it('should render InvitationBadge when subscription has status INVITED and has inviter', () => {
+		render(
+			<SidebarItemBadges
+				room={createFakeSubscription({
+					status: 'INVITED',
+					inviter: { name: 'Rocket Cat', username: 'rocket.cat', _id: 'rocket.cat' },
+					ts: new Date('2025-01-01T00:00:00.000Z'),
+				})}
+			/>,
+			{
+				wrapper: appRoot,
+			},
+		);
+
+		expect(screen.getByRole('status', { name: 'Invited January 1st, 2025' })).toBeInTheDocument();
+	});
+
+	it('should not render InvitationBadge when subscription does not have status INVITED', () => {
+		render(<SidebarItemBadges room={createFakeSubscription()} />, { wrapper: appRoot });
+
+		expect(screen.queryByRole('status', { name: /Invited/ })).not.toBeInTheDocument();
+	});
+});

apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx

@@ -0,0 +1,24 @@
+import { isInviteSubscription } from '@rocket.chat/core-typings';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+
+import UnreadBadge from './UnreadBadge';
+import InvitationBadge from '../../../../components/InvitationBadge';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+export type SidebarItemBadgesProps = {
+	room: SubscriptionWithRoom;
+	roomTitle?: string;
+};
+
+const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => {
+	const { unreadCount, unreadTitle, unreadVariant, showUnread } = useUnreadDisplay(room);
+
+	return (
+		<>
+			{showUnread && <UnreadBadge title={unreadTitle} roomTitle={roomTitle} variant={unreadVariant} total={unreadCount.total} />}
+			{isInviteSubscription(room) && <InvitationBadge marginBlockStart={2} invitationDate={room.ts} />}
+		</>
+	);
+};
+
+export default SidebarItemBadges;

apps/meteor/client/views/navigation/sidebar/badges/UnreadBadge.tsx

@@ -0,0 +1,26 @@
+import { SidebarItemBadge } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+export type UnreadBadgeProps = {
+	title: string;
+	roomTitle?: string;
+	variant: 'primary' | 'warning' | 'danger' | 'secondary';
+	total: number;
+};
+
+const UnreadBadge = ({ title, variant, total, roomTitle }: UnreadBadgeProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<SidebarItemBadge
+			variant={variant}
+			title={title}
+			role='status'
+			aria-label={t('__unreadTitle__from__roomTitle__', { unreadTitle: title, roomTitle })}
+		>
+			<span aria-hidden>{total}</span>
+		</SidebarItemBadge>
+	);
+};
+
+export default UnreadBadge;

apps/meteor/client/views/navigation/sidebar/hooks/usePreventDefault.ts

@@ -0,0 +1,21 @@
+import type { RefObject } from 'react';
+import { useEffect } from 'react';
+
+export const usePreventDefault = (ref: RefObject<Element | null>): { ref: RefObject<Element | null> } => {
+	// Flowrouter uses an addEventListener on the document to capture any clink link, since the react synthetic event use an addEventListener on the document too,
+	// it is impossible/hard to determine which one will happen before and prevent/stop propagation, so feel free to remove this effect after remove flow router :)
+
+	useEffect(() => {
+		const { current } = ref;
+		const stopPropagation: EventListener = (e) => {
+			if ([(e.target as HTMLElement).nodeName, (e.target as HTMLElement).parentElement?.nodeName].includes('BUTTON')) {
+				e.preventDefault();
+			}
+		};
+		current?.addEventListener('click', stopPropagation);
+
+		return (): void => current?.removeEventListener('click', stopPropagation);
+	}, [ref]);
+
+	return { ref };
+};

apps/meteor/client/views/navigation/sidebar/hooks/useShortcutOpenMenu.ts

@@ -0,0 +1,21 @@
+import type { RefObject } from 'react';
+import { useEffect } from 'react';
+import tinykeys from 'tinykeys';
+
+// used to open the menu option by keyboard
+export const useShortcutOpenMenu = (ref: RefObject<Element | null>): void => {
+	useEffect(() => {
+		const unsubscribe = tinykeys(ref.current as HTMLElement, {
+			Alt: (event) => {
+				if (!(event.target as HTMLElement).className.includes('rcx-sidebar-item')) {
+					return;
+				}
+				event.preventDefault();
+				(event.target as HTMLElement).querySelector('button')?.click();
+			},
+		});
+		return (): void => {
+			unsubscribe();
+		};
+	}, [ref]);
+};

apps/meteor/client/views/navigation/sidebar/hooks/useUnreadDisplay.spec.ts

@@ -0,0 +1,224 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { renderHook } from '@testing-library/react';
+
+import { useUnreadDisplay } from './useUnreadDisplay';
+import { createFakeSubscription } from '../../../../../tests/mocks/data';
+
+const dmUnread = createFakeSubscription({
+	t: 'd',
+	unread: 3,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: undefined,
+	tunreadUser: undefined,
+});
+
+const dmThread = createFakeSubscription({
+	t: 'd',
+	unread: 3,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: ['1'],
+	tunreadUser: undefined,
+});
+
+const alert = createFakeSubscription({
+	t: 'p',
+	unread: 0,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: undefined,
+	tunreadUser: undefined,
+	alert: true,
+});
+
+const mentionAndGroupMention = createFakeSubscription({
+	t: 'p',
+	unread: 2,
+	userMentions: 1,
+	groupMentions: 1,
+	tunread: undefined,
+	tunreadUser: undefined,
+	alert: true,
+});
+
+const groupMention = createFakeSubscription({
+	t: 'p',
+	unread: 2,
+	userMentions: 0,
+	groupMentions: 2,
+	tunread: undefined,
+	tunreadUser: undefined,
+	alert: true,
+});
+
+const tunread = createFakeSubscription({
+	t: 'p',
+	unread: 0,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: ['1'],
+	tunreadUser: undefined,
+	alert: true,
+});
+
+const tunreadUser = createFakeSubscription({
+	t: 'p',
+	unread: 1,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: ['1'],
+	tunreadUser: ['1'],
+	alert: true,
+});
+
+const hideUnreadStatus = createFakeSubscription({
+	t: 'p',
+	hideUnreadStatus: true,
+});
+
+const hideUnreadAndMention = createFakeSubscription({
+	t: 'p',
+	hideUnreadStatus: true,
+	hideMentionStatus: true,
+});
+
+const noUnread = createFakeSubscription({
+	t: 'p',
+	unread: 0,
+	userMentions: 0,
+	groupMentions: 0,
+	tunread: undefined,
+	tunreadUser: undefined,
+});
+
+const wrapper = mockAppRoot()
+	.withTranslations('en', 'core', {
+		mentions_counter_one: '{{count}} mention',
+		mentions_counter_other: '{{count}} mentions',
+		threads_counter_one: '{{count}} unread threaded message',
+		threads_counter_other: '{{count}} unread threaded messages',
+		group_mentions_counter_one: '{{count}} group mention',
+		group_mentions_counter_other: '{{count}} group mentions',
+		unread_messages_counter_one: '{{count}} unread message',
+		unread_messages_counter_other: '{{count}} unread messages',
+	})
+	.build();
+
+it('should return correct unread data for [Direct message unread]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(dmUnread), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('secondary');
+	expect(result.current.unreadTitle).toBe('3 unread messages');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('total', 3);
+});
+
+it('should return correct unread data for [Direct message with thread unread]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(dmThread), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('primary');
+	expect(result.current.unreadTitle).toBe('1 unread threaded message, 3 unread messages');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 1);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('total', 4);
+});
+
+it('should return correct unread data for [Channel with unread messages alert only]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(alert), {
+		wrapper,
+	});
+
+	expect(result.current.highlightUnread).toBe(true);
+	expect(result.current.showUnread).toBe(false);
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('total', 0);
+});
+
+it('should return correct unread data for [Mention and group mention]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(mentionAndGroupMention), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('danger');
+	expect(result.current.unreadTitle).toBe('1 mention, 1 group mention');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 1);
+	expect(result.current.unreadCount).toHaveProperty('threads', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 1);
+	expect(result.current.unreadCount).toHaveProperty('total', 2);
+});
+
+it('should return correct unread data for [Group mention]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(groupMention), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('warning');
+	expect(result.current.unreadTitle).toBe('2 group mentions');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 2);
+	expect(result.current.unreadCount).toHaveProperty('total', 2);
+});
+
+it('should return correct unread data for [Thread unread]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(tunread), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('primary');
+	expect(result.current.unreadTitle).toBe('1 unread threaded message');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 1);
+	expect(result.current.unreadCount).toHaveProperty('total', 1);
+});
+
+it('should return correct unread data for [Thread and thread user mention]', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(tunreadUser), {
+		wrapper,
+	});
+	expect(result.current.unreadVariant).toBe('danger');
+	expect(result.current.unreadTitle).toBe('1 mention, 1 unread threaded message');
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 1);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 1);
+	expect(result.current.unreadCount).toHaveProperty('total', 2);
+});
+
+it('should not highlight unread if hideUnreadStatus is enabled', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(hideUnreadStatus));
+
+	expect(result.current.highlightUnread).toBe(false);
+	expect(result.current.showUnread).toBe(true);
+});
+
+it('should not show unread if hideUnreadStatus and hideMentionStatus is enabled', async () => {
+	const { result } = renderHook(() => useUnreadDisplay(hideUnreadAndMention));
+
+	expect(result.current.highlightUnread).toBe(false);
+	expect(result.current.showUnread).toBe(false);
+});
+
+it("should not show unread if there isn't any unread message", async () => {
+	const { result } = renderHook(() => useUnreadDisplay(noUnread));
+
+	expect(result.current.highlightUnread).toBe(false);
+	expect(result.current.showUnread).toBe(false);
+
+	expect(result.current.unreadCount).toHaveProperty('mentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('groupMentions', 0);
+	expect(result.current.unreadCount).toHaveProperty('threads', 0);
+	expect(result.current.unreadCount).toHaveProperty('total', 0);
+});

apps/meteor/client/views/navigation/sidebar/hooks/useUnreadDisplay.ts

@@ -0,0 +1,10 @@
+import { useTranslation } from 'react-i18next';
+
+import type { UnreadData } from '../../../../../lib/getSubscriptionUnreadData';
+import { getSubscriptionUnreadData } from '../../../../../lib/getSubscriptionUnreadData';
+
+export const useUnreadDisplay = (unreadData: UnreadData) => {
+	const { t } = useTranslation();
+
+	return getSubscriptionUnreadData(unreadData, t);
+};

apps/meteor/client/views/navigation/sidebar/index.ts

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

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

@@ -0,0 +1,8 @@
+import { memo } from 'react';
+
+import { createSidePanel } from './SidePanelInternal';
+import RoomSidePanelItem from './SidepanelItem/RoomSidePanelItem';
+
+const SidePanel = createSidePanel(RoomSidePanelItem);
+
+export default memo(SidePanel);

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

@@ -0,0 +1,8 @@
+import { memo } from 'react';
+
+import { createSidePanel } from './SidePanelInternal';
+import InquireSidePanelItem from './omnichannel/InquireSidePanelItem';
+
+const SidePanelInquiry = createSidePanel(InquireSidePanelItem);
+
+export default memo(SidePanelInquiry);

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

@@ -0,0 +1,85 @@
+import { Box, IconButton, Sidepanel, SidepanelHeader, SidepanelHeaderTitle, SidepanelListItem, ToggleSwitch } from '@rocket.chat/fuselage';
+import { VirtualizedScrollbars } from '@rocket.chat/ui-client';
+import { useLayout } from '@rocket.chat/ui-contexts';
+import { useId, useRef, type ComponentType } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
+
+import SidePanelNoResults from './SidePanelNoResults';
+import SidepanelListWrapper from './SidepanelListWrapper';
+import { useOpenedRoom } from '../../../lib/RoomManager';
+import { useIsRoomFilter, type AllGroupsKeys } from '../contexts/RoomsNavigationContext';
+import { usePreventDefault } from '../sidebar/hooks/usePreventDefault';
+
+type SidePanelProps<R = any> = {
+	title: string;
+	currentTab: AllGroupsKeys;
+	unreadOnly: boolean;
+	toggleUnreadOnly: () => void;
+	rooms: R[];
+	ItemContentComponent: ComponentType<{
+		room: R;
+		openedRoom: ReturnType<typeof useOpenedRoom>;
+		isRoomFilter: boolean;
+	}>;
+};
+
+const SidePanelInternal = ({ title, currentTab, unreadOnly, toggleUnreadOnly, rooms, ItemContentComponent }: SidePanelProps) => {
+	const { t } = useTranslation();
+	const ref = useRef(null);
+	const unreadFieldId = useId();
+	const openedRoom = useOpenedRoom();
+	const {
+		isTablet,
+		sidePanel: { closeSidePanel },
+	} = useLayout();
+	const isRoomFilter = useIsRoomFilter();
+
+	usePreventDefault(ref);
+
+	return (
+		<Sidepanel role='tabpanel' aria-label={t('Side_panel')}>
+			<SidepanelHeader role='heading' aria-label={title}>
+				<Box withTruncatedText display='flex' alignItems='center'>
+					{isTablet && <IconButton marginInlineEnd={8} icon='arrow-back' title={t('Back')} small onClick={closeSidePanel} />}
+					<SidepanelHeaderTitle>{title}</SidepanelHeaderTitle>
+				</Box>
+				<Box display='flex' alignItems='center'>
+					<Box htmlFor={unreadFieldId} is='label' fontScale='c1' marginInlineEnd={8}>
+						{t('Unread')}
+					</Box>
+					<ToggleSwitch id={unreadFieldId} checked={unreadOnly} onChange={toggleUnreadOnly} />
+				</Box>
+			</SidepanelHeader>
+			<Box height='full' ref={ref}>
+				{rooms && rooms.length === 0 && <SidePanelNoResults currentTab={currentTab} />}
+				<VirtualizedScrollbars>
+					<Virtuoso
+						totalCount={rooms.length}
+						data={rooms}
+						components={{ Item: SidepanelListItem, List: SidepanelListWrapper }}
+						itemContent={(_, room) => {
+							return <ItemContentComponent room={room} openedRoom={openedRoom} isRoomFilter={isRoomFilter} />;
+						}}
+					/>
+				</VirtualizedScrollbars>
+			</Box>
+		</Sidepanel>
+	);
+};
+
+export const createSidePanel =
+	<R extends object>(
+		ItemContentComponent: ComponentType<{ room: R; openedRoom: ReturnType<typeof useOpenedRoom>; isRoomFilter: boolean }>,
+	) =>
+	// eslint-disable-next-line react/no-multi-comp, react/display-name
+	({ title, currentTab, unreadOnly, toggleUnreadOnly, rooms }: Omit<SidePanelProps<R>, 'ItemContentComponent'>) => (
+		<SidePanelInternal
+			title={title}
+			currentTab={currentTab}
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms}
+			ItemContentComponent={ItemContentComponent}
+		/>
+	);

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

@@ -0,0 +1,70 @@
+import { useTranslation } from 'react-i18next';
+
+import GenericNoResults from '../../../components/GenericNoResults';
+import { sidePanelFiltersConfig } from '../contexts/RoomsNavigationContext';
+import type { AllGroupsKeys } from '../contexts/RoomsNavigationContext';
+
+export type SidePanelNoResultsProps = { currentTab: AllGroupsKeys };
+
+const SidePanelNoResults = ({ currentTab }: SidePanelNoResultsProps) => {
+	const { t } = useTranslation();
+
+	switch (currentTab) {
+		case 'mentions':
+			return (
+				<GenericNoResults icon={sidePanelFiltersConfig.mentions.icon} title={t('No_mentions')} description={t('No_mentions_description')} />
+			);
+		case 'favorites':
+			return (
+				<GenericNoResults
+					icon={sidePanelFiltersConfig.favorites.icon}
+					title={t('No_favorite_rooms')}
+					description={t('No_favorite_rooms_description')}
+				/>
+			);
+		case 'discussions':
+			return (
+				<GenericNoResults
+					icon={sidePanelFiltersConfig.discussions.icon}
+					title={t('No_discussions')}
+					description={t('No_discussions_description')}
+				/>
+			);
+		case 'inProgress':
+			return (
+				<GenericNoResults
+					icon={sidePanelFiltersConfig.inProgress.icon}
+					title={t('No_chats_in_progress')}
+					description={t('No_chats_in_progress_description')}
+				/>
+			);
+		case 'queue':
+			return (
+				<GenericNoResults
+					icon={sidePanelFiltersConfig.queue.icon}
+					title={t('No_chats_in_queue')}
+					description={t('No_chats_in_queue_description')}
+				/>
+			);
+		case 'onHold':
+			return (
+				<GenericNoResults
+					icon={sidePanelFiltersConfig.onHold.icon}
+					title={t('No_chats_on_hold')}
+					description={t('No_chats_on_hold_description')}
+				/>
+			);
+		case 'teams':
+			return (
+				<GenericNoResults icon={null} title={t('No_channels_or_discussions')} description={t('No_channels_or_discussions_description')} />
+			);
+		case 'channels':
+			return <GenericNoResults icon={null} title={t('No_discussions')} description={t('No_discussions_channels_filter_description')} />;
+		case 'directMessages':
+			return <GenericNoResults icon={null} title={t('No_discussions')} description={t('No_discussions_dms_filter_description')} />;
+		default:
+			return <GenericNoResults icon='inbox' title={t('No_rooms')} description={t('No_rooms_description')} />;
+	}
+};
+
+export default SidePanelNoResults;

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

@@ -0,0 +1,36 @@
+import SidePanelAll from './tabs/SidePanelAll';
+import { useRoomsListContext, useSidePanelFilter } from '../contexts/RoomsNavigationContext';
+import SidePanelInProgress from './omnichannel/tabs/SidePanelInProgress';
+import SidePanelQueue from './omnichannel/tabs/SidePanelQueue';
+import SidePanelOnHold from './omnichannel/tabs/SidepanelOnHold';
+import SidePanelDiscussions from './tabs/SidePanelDiscussions';
+import SidePanelFavorites from './tabs/SidePanelFavorites';
+import SidePanelRooms from './tabs/SidePanelRooms';
+
+const SidePanelRouter = () => {
+	const [currentTab] = useSidePanelFilter();
+	const { parentRid } = useRoomsListContext();
+
+	switch (currentTab) {
+		case 'all':
+			return <SidePanelAll />;
+		case 'favorites':
+			return <SidePanelFavorites />;
+		case 'discussions':
+			return <SidePanelDiscussions />;
+		case 'teams':
+		case 'channels':
+		case 'directMessages':
+			return parentRid ? <SidePanelRooms parentRid={parentRid} /> : <SidePanelAll />;
+		case 'inProgress':
+			return <SidePanelInProgress />;
+		case 'onHold':
+			return <SidePanelOnHold />;
+		case 'queue':
+			return <SidePanelQueue />;
+		default:
+			return <SidePanelAll />;
+	}
+};
+
+export default SidePanelRouter;

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomMenu.tsx

@@ -0,0 +1,31 @@
+import type { RoomType } from '@rocket.chat/core-typings';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import type { LocationPathname } from '@rocket.chat/ui-contexts';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+
+import { useRoomMenuActions } from '../hooks/useRoomMenuActions';
+
+export type RoomMenuProps = {
+	rid: string;
+	unread?: boolean;
+	threadUnread?: boolean;
+	alert?: boolean;
+	roomOpen?: boolean;
+	type: RoomType;
+	cl?: boolean;
+	name?: string;
+	hideDefaultOptions: boolean;
+	href: LocationPathname | undefined;
+};
+
+const RoomMenu = ({ rid, unread, threadUnread, alert, roomOpen, type, cl, name = '', hideDefaultOptions = false, href }: RoomMenuProps) => {
+	const t = useTranslation();
+
+	const isUnread = alert || unread || threadUnread;
+	const sections = useRoomMenuActions({ rid, type, name, isUnread, cl, roomOpen, hideDefaultOptions, href });
+
+	return <GenericMenu detached title={t('Options')} mini aria-keyshortcuts='alt' sections={sections} />;
+};
+
+export default memo(RoomMenu);

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItem.tsx

@@ -0,0 +1,82 @@
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { Icon, SidebarItemIcon } from '@rocket.chat/fuselage';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
+import { useUserId, type SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import RoomMenu from './RoomMenu';
+import RoomSidePanelItemBadges from './RoomSidePanelItemBadges';
+import SidePanelParent from './SidePanelParent';
+import SidePanelItem from './SidepanelItem';
+import { RoomIcon } from '../../../../components/RoomIcon';
+import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
+import { getSubscriptionDraft } from '../../../../lib/utils/getSubscriptionDraft';
+import { isIOsDevice } from '../../../../lib/utils/isIOsDevice';
+import { getMessagePreview } from '../../../../lib/utils/normalizeMessagePreview/getMessagePreview';
+import { useOmnichannelPriorities } from '../../../omnichannel/hooks/useOmnichannelPriorities';
+import { useUnreadDisplay } from '../../sidebar/hooks/useUnreadDisplay';
+
+export type RoomSidePanelItemProps = {
+	room: SubscriptionWithRoom;
+	openedRoom?: string;
+	isRoomFilter?: boolean;
+};
+
+const RoomSidePanelItem = ({ room, openedRoom, isRoomFilter, ...props }: RoomSidePanelItemProps) => {
+	const { t } = useTranslation();
+	const isAnonymous = !useUserId();
+
+	const { highlightUnread: highlighted, unreadCount } = useUnreadDisplay(room);
+	const { unread = 0, alert, rid, t: type, cl } = room;
+
+	const time = 'lastMessage' in room ? room.lastMessage?.ts : undefined;
+	const message = getMessagePreview(room, room.lastMessage, t);
+	const title = roomCoordinator.getRoomName(room.t, room) || '';
+	const href = roomCoordinator.getRouteLink(room.t, room) || '';
+
+	const isQueued = isOmnichannelRoom(room) && room.status === 'queued';
+	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
+
+	const parentRoomId = Boolean(room.prid || (room.teamId && !room.teamMain));
+
+	const titleIcon = getSubscriptionDraft(room) ? (
+		<Icon name='pencil' size='x12' title={room.draft ? t('Unfinished_message') : t('Unfinished_thread_message')} />
+	) : undefined;
+
+	const menu =
+		!isIOsDevice && !isAnonymous && (!isQueued || (isQueued && isPriorityEnabled)) ? (
+			<RoomMenu
+				alert={alert}
+				threadUnread={unreadCount.threads > 0}
+				rid={rid}
+				unread={!!unread}
+				roomOpen={rid === openedRoom}
+				type={type}
+				cl={cl}
+				name={title}
+				hideDefaultOptions={isQueued}
+				href={href || undefined}
+			/>
+		) : undefined;
+
+	return (
+		<SidePanelItem
+			href={href}
+			selected={rid === openedRoom}
+			title={title}
+			titleIcon={titleIcon}
+			avatar={<RoomAvatar size='x20' room={{ ...room, _id: room.rid || room._id, type: room.t }} />}
+			icon={<SidebarItemIcon highlighted={highlighted} icon={<RoomIcon room={room} placement='sidebar' size='x20' />} />}
+			unread={highlighted}
+			time={time}
+			subtitle={message ? <span className='message-body--unstyled' dangerouslySetInnerHTML={{ __html: message }} /> : null}
+			parentRoom={!isRoomFilter && parentRoomId && <SidePanelParent room={room} />}
+			badges={<RoomSidePanelItemBadges room={room} roomTitle={title} />}
+			menu={menu}
+			{...props}
+		/>
+	);
+};
+
+export default memo(RoomSidePanelItem);

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.spec.tsx

@@ -0,0 +1,78 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+
+import RoomSidePanelItemBadges from './RoomSidePanelItemBadges';
+import { createFakeSubscription } from '../../../../../tests/mocks/data';
+
+jest.mock('../omnichannel/SidePanelOmnichannelBadges', () => ({
+	__esModule: true,
+	default: () => <i role='status' aria-label='OmnichannelBadges' />,
+}));
+
+describe('RoomSidePanelItemBadges', () => {
+	const appRoot = mockAppRoot()
+		.withTranslations('en', 'core', {
+			Invited__date__: 'Invited {{date}}',
+			mentions_counter_one: '{{count}} mention',
+			mentions_counter_other: '{{count}} mentions',
+			__unreadTitle__from__roomTitle__: '{{unreadTitle}} from {{roomTitle}}',
+		})
+		.build();
+
+	afterEach(() => {
+		jest.resetAllMocks();
+	});
+
+	it('should render UnreadBadge when there are unread messages', () => {
+		render(
+			<RoomSidePanelItemBadges room={createFakeSubscription({ unread: 1, userMentions: 1, groupMentions: 0 })} roomTitle='Test Room' />,
+			{ wrapper: appRoot },
+		);
+
+		expect(screen.getByRole('status', { name: '1 mention from Test Room' })).toBeInTheDocument();
+	});
+
+	it('should not render UnreadBadge when there are no unread messages', () => {
+		render(
+			<RoomSidePanelItemBadges room={createFakeSubscription({ unread: 0, userMentions: 0, groupMentions: 0 })} roomTitle='Test Room' />,
+			{ wrapper: appRoot },
+		);
+
+		expect(screen.queryByRole('status', { name: 'Test Room' })).not.toBeInTheDocument();
+	});
+
+	it('should render OmnichannelBadges when the room is an omnichannel room', () => {
+		render(<RoomSidePanelItemBadges room={createFakeSubscription({ t: 'l' })} />, { wrapper: appRoot });
+
+		expect(screen.getByRole('status', { name: 'OmnichannelBadges' })).toBeInTheDocument();
+	});
+
+	it('should not render OmnichannelBadges when the room is not an omnichannel room', () => {
+		render(<RoomSidePanelItemBadges room={createFakeSubscription({ t: 'p' })} />, { wrapper: appRoot });
+
+		expect(screen.queryByRole('status', { name: 'OmnichannelBadges' })).not.toBeInTheDocument();
+	});
+
+	it('should render InvitationBadge when subscription has status INVITED', () => {
+		render(
+			<RoomSidePanelItemBadges
+				room={createFakeSubscription({
+					status: 'INVITED',
+					inviter: { name: 'Rocket Cat', username: 'rocket.cat', _id: 'rocket.cat' },
+					ts: new Date('2025-01-01T00:00:00.000Z'),
+				})}
+			/>,
+			{
+				wrapper: appRoot,
+			},
+		);
+
+		expect(screen.getByRole('status', { name: 'Invited January 1st, 2025' })).toBeInTheDocument();
+	});
+
+	it('should not render InvitationBadge when subscription does not have status INVITED', () => {
+		render(<RoomSidePanelItemBadges room={createFakeSubscription()} />, { wrapper: appRoot });
+
+		expect(screen.queryByRole('status', { name: 'Invited' })).not.toBeInTheDocument();
+	});
+});

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/RoomSidePanelItemBadges.tsx

@@ -0,0 +1,26 @@
+import { isInviteSubscription, isOmnichannelRoom } from '@rocket.chat/core-typings';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+
+import InvitationBadge from '../../../../components/InvitationBadge';
+import UnreadBadge from '../../sidebar/badges/UnreadBadge';
+import { useUnreadDisplay } from '../../sidebar/hooks/useUnreadDisplay';
+import SidePanelOmnichannelBadges from '../omnichannel/SidePanelOmnichannelBadges';
+
+export type RoomSidePanelItemBadgesProps = {
+	room: SubscriptionWithRoom;
+	roomTitle?: string;
+};
+
+const RoomSidePanelItemBadges = ({ room, roomTitle }: RoomSidePanelItemBadgesProps) => {
+	const { unreadCount, unreadTitle, unreadVariant, showUnread } = useUnreadDisplay(room);
+
+	return (
+		<>
+			{isOmnichannelRoom(room) && <SidePanelOmnichannelBadges room={room} />}
+			{showUnread && <UnreadBadge title={unreadTitle} roomTitle={roomTitle} variant={unreadVariant} total={unreadCount.total} />}
+			{isInviteSubscription(room) && <InvitationBadge invitationDate={room.ts} />}
+		</>
+	);
+};
+
+export default RoomSidePanelItemBadges;

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelParent.tsx

@@ -0,0 +1,17 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+
+import SidePanelParentRoom from './SidePanelParentRoom';
+import SidePanelParentTeam from './SidePanelParentTeam';
+
+export type SidePanelParentProps = { room: SubscriptionWithRoom };
+
+const SidePanelParent = ({ room }: SidePanelParentProps) => {
+	if (room.prid) {
+		return <SidePanelParentRoom prid={room.prid} />;
+	}
+
+	return room.teamId && !room.teamMain && <SidePanelParentTeam room={room} />;
+};
+
+export default memo(SidePanelParent);

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelParentRoom/SidePanelParentRoom.tsx

@@ -0,0 +1,22 @@
+import type { ISubscription } from '@rocket.chat/core-typings';
+import { isPrivateRoom } from '@rocket.chat/core-typings';
+
+import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
+import SidePanelTag from '../SidePanelTag';
+import SidePanelTagIcon from '../SidePanelTagIcon';
+
+export type SidePanelParentRoomProps = { subscription: ISubscription };
+
+const SidePanelParentRoom = ({ subscription }: SidePanelParentRoomProps) => {
+	const icon = isPrivateRoom(subscription) ? 'hashtag-lock' : 'hashtag';
+	const roomName = roomCoordinator.getRoomName(subscription?.t, subscription);
+
+	return (
+		<SidePanelTag>
+			{icon && <SidePanelTagIcon icon={{ name: icon }} />}
+			{roomName}
+		</SidePanelTag>
+	);
+};
+
+export default SidePanelParentRoom;

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelParentRoom/SidePanelParentRoomWithData.tsx

@@ -0,0 +1,17 @@
+import { useUserSubscription } from '@rocket.chat/ui-contexts';
+
+import SidePanelParentRoom from './SidePanelParentRoom';
+
+export type SidePanelParentRoomWithDataProps = { prid: string };
+
+const SidePanelParentRoomWithData = ({ prid }: SidePanelParentRoomWithDataProps) => {
+	const subscription = useUserSubscription(prid);
+
+	if (!subscription) {
+		return null;
+	}
+
+	return <SidePanelParentRoom subscription={subscription} />;
+};
+
+export default SidePanelParentRoomWithData;

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelParentRoom/index.ts

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

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelParentTeam.tsx

@@ -0,0 +1,24 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+
+import SidePanelTag from './SidePanelTag';
+import SidePanelTagIcon from './SidePanelTagIcon';
+import { useParentTeamData } from './useParentTeamData';
+
+export type SidePanelParentTeamProps = { room: SubscriptionWithRoom };
+
+const SidePanelParentTeam = ({ room }: SidePanelParentTeamProps) => {
+	const { teamName, shouldDisplayTeam, teamInfoError, isTeamPublic } = useParentTeamData(room.teamId);
+
+	if (teamInfoError || !shouldDisplayTeam) {
+		return null;
+	}
+
+	return (
+		<SidePanelTag>
+			<SidePanelTagIcon icon={{ name: isTeamPublic ? 'team' : 'team-lock' }} />
+			{teamName}
+		</SidePanelTag>
+	);
+};
+
+export default SidePanelParentTeam;

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelTag.tsx

@@ -0,0 +1,8 @@
+import { Tag } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+const SidePanelTag = (props: ComponentProps<typeof Tag>) => (
+	<Tag role='button' tabIndex={0} {...props} maxWidth='50%' flexShrink={1} flexGrow={0} />
+);
+
+export default SidePanelTag;

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelTagIcon.tsx

@@ -0,0 +1,8 @@
+import { Icon } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+export type SidePanelTagIconProps = { icon: Pick<ComponentProps<typeof Icon>, 'name' | 'color'> | null };
+
+const SidePanelTagIcon = ({ icon }: SidePanelTagIconProps) => (icon ? <Icon size='x12' marginInlineEnd={4} {...icon} /> : null);
+
+export default SidePanelTagIcon;

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

@@ -0,0 +1,90 @@
+import {
+	IconButton,
+	SidebarItem,
+	SidebarItemAvatarWrapper,
+	SidebarItemCol,
+	SidebarItemContent,
+	SidebarItemMenu,
+	SidebarItemRow,
+	SidebarItemTimestamp,
+	SidebarItemTitle,
+} from '@rocket.chat/fuselage';
+import { useLayout } from '@rocket.chat/ui-contexts';
+import type { ReactNode } from 'react';
+import { memo, useState } from 'react';
+
+import { useShortTimeAgo } from '../../../../hooks/useTimeAgo';
+
+export type SidePanelItemProps = {
+	href: string;
+	selected: boolean;
+	title: string;
+	titleIcon?: ReactNode;
+	avatar: ReactNode;
+	icon: ReactNode;
+	unread: boolean;
+	time?: Date;
+	subtitle: ReactNode;
+	parentRoom?: ReactNode;
+	badges?: ReactNode;
+	menu?: ReactNode;
+};
+
+const SidePanelItem = ({
+	href,
+	selected,
+	title,
+	titleIcon,
+	avatar,
+	icon,
+	unread,
+	time,
+	subtitle,
+	parentRoom,
+	badges,
+	menu,
+	...props
+}: SidePanelItemProps) => {
+	const { sidebar } = useLayout();
+	const formatDate = useShortTimeAgo();
+	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
+
+	const handleFocus = () => setMenuVisibility(true);
+	const handlePointerEnter = () => setMenuVisibility(true);
+
+	return (
+		<SidebarItem
+			{...props}
+			href={href}
+			onClick={() => !selected && sidebar.toggle()}
+			selected={selected}
+			onFocus={handleFocus}
+			onPointerEnter={handlePointerEnter}
+			aria-label={title}
+			aria-current={selected ? 'page' : undefined}
+			level={2}
+		>
+			<SidebarItemCol>
+				<SidebarItemRow>
+					{avatar && <SidebarItemAvatarWrapper>{avatar}</SidebarItemAvatarWrapper>}
+					{icon}
+					<SidebarItemTitle unread={unread}>{title}</SidebarItemTitle>
+					{time && <SidebarItemTimestamp unread={unread}>{formatDate(time)}</SidebarItemTimestamp>}
+				</SidebarItemRow>
+				<SidebarItemRow>
+					<SidebarItemContent unread={unread}>{subtitle}</SidebarItemContent>
+					{parentRoom}
+					{titleIcon}
+					{badges}
+					{menu && (
+						<SidebarItemMenu>
+							{menuVisibility ? menu : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' />}
+						</SidebarItemMenu>
+					)}
+				</SidebarItemRow>
+			</SidebarItemCol>
+		</SidebarItem>
+	);
+};
+
+export default memo(SidePanelItem);

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/index.ts

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

apps/meteor/client/views/navigation/sidepanel/SidepanelItem/useParentTeamData.ts

@@ -0,0 +1,40 @@
+import type { ITeam } from '@rocket.chat/core-typings';
+import { TeamType } from '@rocket.chat/core-typings';
+import { useUserId } from '@rocket.chat/ui-contexts';
+
+import { useTeamInfoQuery } from '../../../../hooks/useTeamInfoQuery';
+import { useUserTeamsQuery } from '../../../room/hooks/useUserTeamsQuery';
+
+type APIErrorResult = { success: boolean; error: string };
+
+export const useParentTeamData = (teamId?: ITeam['_id']) => {
+	const userId = useUserId();
+
+	if (!teamId) {
+		throw new Error('invalid rid');
+	}
+
+	if (!userId) {
+		throw new Error('invalid uid');
+	}
+
+	const {
+		data: teamInfo,
+		isLoading: teamInfoLoading,
+		isError: teamInfoError,
+	} = useTeamInfoQuery(teamId, { retry: (_, error) => (error as unknown as APIErrorResult)?.error !== 'unauthorized' });
+
+	const { data: userTeams, isLoading: userTeamsLoading } = useUserTeamsQuery(userId);
+
+	const userBelongsToTeam = Boolean(userTeams?.find((team) => team._id === teamId)) || false;
+	const isTeamPublic = teamInfo?.type === TeamType.PUBLIC;
+	const shouldDisplayTeam = isTeamPublic || userBelongsToTeam;
+
+	return {
+		teamName: teamInfo?.name,
+		isLoading: userTeamsLoading || teamInfoLoading,
+		teamInfoError,
+		shouldDisplayTeam,
+		isTeamPublic,
+	};
+};

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

@@ -0,0 +1,17 @@
+import { SidepanelList } from '@rocket.chat/fuselage';
+import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
+import { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { Components } from 'react-virtuoso';
+
+import { useSidebarListNavigation } from '../sidebar/RoomList/useSidebarListNavigation';
+
+const SidepanelListWrapper: Components['List'] = forwardRef(function SidepanelListWrapper(props, ref) {
+	const { t } = useTranslation();
+	const { sidebarListRef } = useSidebarListNavigation();
+	const mergedRefs = useMergedRefs(ref, sidebarListRef);
+
+	return <SidepanelList aria-label={t('Channels')} ref={mergedRefs} {...props} />;
+});
+
+export default SidepanelListWrapper;

apps/meteor/client/views/navigation/sidepanel/hooks/useChannelsChildrenList.spec.ts

@@ -0,0 +1,126 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { renderHook } from '@testing-library/react';
+
+import { createFakeSubscription } from '../../../../../tests/mocks/data';
+import { emptyUnread, createMockGlobalStore } from '../../../../../tests/mocks/utils';
+import { isUnreadSubscription } from '../../contexts/RoomsNavigationContext';
+
+const fakeTeam = { ...createFakeSubscription({ alert: true }) };
+const fakeChannel = { ...createFakeSubscription({ t: 'c', alert: true }) };
+
+const teamChildChannel = {
+	...createFakeSubscription({ t: 'c', ...emptyUnread, prid: fakeTeam.rid }),
+};
+const unreadTeamChildChannel = {
+	...createFakeSubscription({ t: 'c', alert: true, prid: fakeTeam.rid }),
+};
+const childChannel = {
+	...createFakeSubscription({ t: 'c', ...emptyUnread, prid: fakeChannel.rid }),
+};
+const userMentionsChildChannel = {
+	...createFakeSubscription({ t: 'c', userMentions: 1, prid: fakeChannel.rid }),
+};
+const groupMentionsChildChannel = {
+	...createFakeSubscription({ t: 'c', groupMentions: 1, prid: fakeChannel.rid }),
+};
+const unreadChildChannel = {
+	...createFakeSubscription({ t: 'c', unread: 1, prid: fakeChannel.rid }),
+};
+const tUnreadChildChannel = {
+	...createFakeSubscription({ t: 'c', tunread: ['1'], prid: fakeChannel.rid }),
+};
+const tUnreadUserChildChannel = {
+	...createFakeSubscription({ t: 'c', tunreadUser: ['1'], prid: fakeChannel.rid }),
+};
+const tUnreadGroupChildChannel = {
+	...createFakeSubscription({ t: 'c', tunreadGroup: ['1'], prid: fakeChannel.rid }),
+};
+
+const teamsSubscriptions = [fakeTeam, teamChildChannel, unreadTeamChildChannel] as unknown as SubscriptionWithRoom[];
+const channelsSubscriptions = [
+	fakeChannel,
+	childChannel,
+	userMentionsChildChannel,
+	groupMentionsChildChannel,
+	unreadChildChannel,
+	tUnreadChildChannel,
+	tUnreadUserChildChannel,
+	tUnreadGroupChildChannel,
+] as unknown as SubscriptionWithRoom[];
+
+const subscriptionsMock = [...teamsSubscriptions, ...channelsSubscriptions] as unknown as SubscriptionWithRoom[];
+
+jest.mock('../../../../stores/Subscriptions', () => {
+	return {
+		Subscriptions: createMockGlobalStore(subscriptionsMock),
+	};
+});
+
+it('should return all subscriptions parent of fakeChannel', async () => {
+	const { useChannelsChildrenList } = await import('./useChannelsChildrenList');
+
+	const { result } = renderHook(() => useChannelsChildrenList(fakeChannel.rid, false), {
+		wrapper: mockAppRoot().withSubscriptions(subscriptionsMock).build(),
+	});
+
+	expect(result.current).toHaveLength(channelsSubscriptions.length);
+	expect(result.current[0].rid).toBe(fakeChannel.rid);
+
+	if (result.current[0].rid === fakeChannel.rid) return;
+	expect(result.current[0].prid).toBe(fakeChannel.rid);
+});
+
+it('should return unread subscriptions after parent but before read ones for channels', async () => {
+	const { useChannelsChildrenList } = await import('./useChannelsChildrenList');
+
+	const { result } = renderHook(() => useChannelsChildrenList(fakeChannel.rid, true), {
+		wrapper: mockAppRoot().withSubscriptions(subscriptionsMock).build(),
+	});
+
+	expect(result.current).toHaveLength(channelsSubscriptions.length);
+	expect(result.current[0].rid).toBe(fakeChannel.rid);
+
+	expect(isUnreadSubscription(result.current[1])).toBe(true);
+	expect(isUnreadSubscription(result.current[2])).toBe(true);
+	expect(isUnreadSubscription(result.current[3])).toBe(true);
+	expect(isUnreadSubscription(result.current[4])).toBe(true);
+	expect(isUnreadSubscription(result.current[5])).toBe(true);
+	expect(isUnreadSubscription(result.current[6])).toBe(true);
+
+	expect(isUnreadSubscription(result.current[7])).toBe(false);
+
+	if (result.current[0].rid === fakeChannel.rid) return;
+	expect(result.current[0].prid).toBe(fakeChannel.rid);
+});
+
+it('should return subscriptions parent of fakeTeam', async () => {
+	const { useChannelsChildrenList } = await import('./useChannelsChildrenList');
+
+	const { result } = renderHook(() => useChannelsChildrenList(fakeTeam.rid, false), {
+		wrapper: mockAppRoot().withSubscriptions(subscriptionsMock).build(),
+	});
+
+	expect(result.current).toHaveLength(teamsSubscriptions.length);
+	expect(result.current[0].rid).toBe(fakeTeam.rid);
+
+	if (result.current[0].rid === fakeTeam.rid) return;
+	expect(result.current[0].prid).toBe(fakeTeam.rid);
+});
+
+it('should return unread subscriptions after parent but before read ones for teams', async () => {
+	const { useChannelsChildrenList } = await import('./useChannelsChildrenList');
+
+	const { result } = renderHook(() => useChannelsChildrenList(fakeTeam.rid, true), {
+		wrapper: mockAppRoot().withSubscriptions(subscriptionsMock).build(),
+	});
+
+	expect(result.current).toHaveLength(teamsSubscriptions.length);
+	expect(result.current[0].rid).toBe(fakeTeam.rid);
+
+	expect(isUnreadSubscription(result.current[1])).toBe(true);
+	expect(isUnreadSubscription(result.current[2])).toBe(false);
+
+	if (result.current[0].rid === fakeTeam.rid) return;
+	expect(result.current[0].prid).toBe(fakeTeam.rid);
+});

apps/meteor/client/views/navigation/sidepanel/hooks/useChannelsChildrenList.ts

@@ -0,0 +1,57 @@
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { useShallow } from 'zustand/shallow';
+
+import { pipe } from '../../../../lib/cachedStores/pipe';
+import { Subscriptions } from '../../../../stores';
+import { isUnreadSubscription } from '../../contexts/RoomsNavigationContext';
+
+const sortByLmPipe = pipe<SubscriptionWithRoom>().sortByField('lm', -1);
+
+/**
+ * This helper function is used to ensure that the main room (main team room or parent's discussion room)
+ * is always at the top of the list.
+ */
+const getMainRoomAndSort = (records: SubscriptionWithRoom[], unreadOnly: boolean, teamId?: string) => {
+	const mainRoom = records.find((record) => (teamId ? record.teamMain : !record.prid));
+	const filteredRecords = records.filter((record) => mainRoom?.rid !== record.rid);
+	const sortedRecords = sortByLmPipe.apply(filteredRecords);
+	const rest = !unreadOnly
+		? sortedRecords
+		: sortedRecords
+				.reduce(
+					(result, record) => {
+						if (isUnreadSubscription(record)) {
+							result[0].push(record);
+							return result;
+						}
+						result[1].push(record);
+						return result;
+					},
+					[[] as SubscriptionWithRoom[], [] as SubscriptionWithRoom[]],
+				)
+				.flat();
+
+	if (mainRoom) {
+		rest.unshift(mainRoom);
+	}
+
+	return rest;
+};
+
+export const useChannelsChildrenList = (parentRid: string, unreadOnly: boolean, teamId?: string) => {
+	return Subscriptions.use(
+		useShallow((state) => {
+			const records = state.filter((subscription) => {
+				if (parentRid === subscription.prid || parentRid === subscription.rid) {
+					return true;
+				}
+				if (teamId && subscription.teamId === teamId) {
+					return true;
+				}
+				return false;
+			});
+
+			return getMainRoomAndSort(records, unreadOnly, teamId);
+		}),
+	);
+};

apps/meteor/client/views/navigation/sidepanel/hooks/useRoomMenuActions.spec.ts

@@ -0,0 +1,104 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { renderHook } from '@testing-library/react';
+
+import { useRoomMenuActions } from './useRoomMenuActions';
+import { createFakeSubscription } from '../../../../../tests/mocks/data';
+
+const mockSubscription = createFakeSubscription({ name: 'room1', fname: 'Room 1', t: 'c', disableNotifications: false, rid: 'room1' });
+
+jest.mock('../../../../../client/lib/rooms/roomCoordinator', () => ({
+	roomCoordinator: {
+		getRoomDirectives: () => ({
+			getUiText: () => 'leaveWarning',
+		}),
+	},
+}));
+
+jest.mock('../../../../../client/lib/LegacyRoomManager', () => ({
+	LegacyRoomManager: {
+		close: jest.fn(),
+	},
+}));
+
+// TODO: Update this mock when we get the mocked OmnichannelContext working
+jest.mock('../../../omnichannel/hooks/useOmnichannelPrioritiesMenu', () => ({
+	useOmnichannelPrioritiesMenu: jest.fn(() => [{ id: 'priority', content: 'Priority', icon: 'priority', onClick: jest.fn() }]),
+}));
+
+const mockHookProps = {
+	rid: 'room1',
+	type: 'c',
+	name: 'Room 1',
+	isUnread: true,
+	cl: true,
+	roomOpen: true,
+	hideDefaultOptions: false,
+	href: '/channel/room1',
+} as const;
+
+describe('useRoomMenuActions', () => {
+	it('should return all menu options for normal rooms', () => {
+		const { result } = renderHook(() => useRoomMenuActions(mockHookProps), {
+			wrapper: mockAppRoot()
+				.withSubscription({ ...mockSubscription, rid: 'room1' })
+				.withPermission('leave-c')
+				.withPermission('leave-p')
+				.withSetting('Favorite_Rooms', true)
+				.build(),
+		});
+
+		const actions = result.current;
+		expect(actions).toHaveLength(2);
+		expect(actions[0].items).toHaveLength(4);
+		expect(actions[1].title).toBe('Notifications');
+		expect(actions[1].items).toHaveLength(2);
+	});
+
+	it('should return priorities section for omnichannel room', () => {
+		const { result } = renderHook(() => useRoomMenuActions({ ...mockHookProps, type: 'l' }), {
+			wrapper: mockAppRoot()
+				.withSubscription({ ...mockSubscription, t: 'l' })
+				.withPermission('leave-c')
+				.withPermission('leave-p')
+				.withSetting('Favorite_Rooms', true)
+				.build(),
+		});
+
+		expect(result.current.length).toBe(2);
+		expect(result.current[1].title).toBe('Priorities');
+		expect(result.current.some((section) => section.title === 'Notifications')).toBe(false);
+		expect(result.current[0].items).toHaveLength(2);
+		expect(result.current[0].title).toBe('');
+	});
+
+	it('should not return any menu option if hideDefaultOptions', () => {
+		const { result } = renderHook(() => useRoomMenuActions({ ...mockHookProps, hideDefaultOptions: true }), {
+			wrapper: mockAppRoot()
+				.withSubscription(mockSubscription)
+				.withPermission('leave-c')
+				.withPermission('leave-p')
+				.withSetting('Favorite_Rooms', true)
+				.build(),
+		});
+
+		expect(result.current).toHaveLength(0);
+	});
+
+	it('should not return favorite room option if setting is disabled', () => {
+		const { result } = renderHook(() => useRoomMenuActions(mockHookProps), {
+			wrapper: mockAppRoot()
+				.withSubscription(mockSubscription)
+				.withPermission('leave-c')
+				.withPermission('leave-p')
+				.withSetting('Favorite_Rooms', false)
+				.build(),
+		});
+
+		const actions = result.current;
+		expect(actions).toHaveLength(2);
+		expect(actions[0].items).toHaveLength(3);
+		expect(actions[0].items.some((item) => item.id === 'toggleFavorite')).toBe(false);
+		expect(actions[1].title).toBe('Notifications');
+		expect(actions[1].items).toHaveLength(2);
+	});
+});

apps/meteor/client/views/navigation/sidepanel/hooks/useRoomMenuActions.ts

@@ -0,0 +1,145 @@
+import type { RoomType } from '@rocket.chat/core-typings';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { usePermission, useRouter, useSetting, useUserSubscription } from '@rocket.chat/ui-contexts';
+import type { LocationPathname } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useLeaveRoomAction } from '../../../../hooks/menuActions/useLeaveRoom';
+import { useToggleFavoriteAction } from '../../../../hooks/menuActions/useToggleFavoriteAction';
+import { useToggleNotificationAction } from '../../../../hooks/menuActions/useToggleNotificationsAction';
+import { useToggleReadAction } from '../../../../hooks/menuActions/useToggleReadAction';
+import { useHideRoomAction } from '../../../../hooks/useHideRoomAction';
+import { useOmnichannelPrioritiesMenu } from '../../../omnichannel/hooks/useOmnichannelPrioritiesMenu';
+
+type RoomMenuActionsProps = {
+	rid: string;
+	type: RoomType;
+	name: string;
+	isUnread?: boolean;
+	cl?: boolean;
+	roomOpen?: boolean;
+	hideDefaultOptions: boolean;
+	href: LocationPathname | undefined;
+};
+
+export const useRoomMenuActions = ({
+	rid,
+	type,
+	name,
+	isUnread,
+	cl,
+	roomOpen,
+	hideDefaultOptions,
+	href,
+}: RoomMenuActionsProps): { title: string; items: GenericMenuItemProps[] }[] => {
+	const { t } = useTranslation();
+	const subscription = useUserSubscription(rid);
+	const router = useRouter();
+
+	const isFavorite = Boolean(subscription?.f);
+	const canLeaveChannel = usePermission('leave-c');
+	const canLeavePrivate = usePermission('leave-p');
+	const canFavorite = useSetting('Favorite_Rooms', true);
+	const isNotificationEnabled = !subscription?.disableNotifications;
+
+	const canLeave = ((): boolean => {
+		if (type === 'c' && !canLeaveChannel) {
+			return false;
+		}
+		if (type === 'p' && !canLeavePrivate) {
+			return false;
+		}
+		return !((cl != null && !cl) || ['d', 'l'].includes(type));
+	})();
+
+	const handleHide = useHideRoomAction({ rid, type, name }, { redirect: false });
+	const handleToggleFavorite = useToggleFavoriteAction({ rid, isFavorite });
+	const handleToggleRead = useToggleReadAction({ rid, isUnread, subscription });
+	const handleLeave = useLeaveRoomAction({ rid, type, name, roomOpen });
+	const handleToggleNotification = useToggleNotificationAction({ rid, isNotificationEnabled, roomName: name });
+
+	const isOmnichannelRoom = type === 'l';
+	const prioritiesMenu = useOmnichannelPrioritiesMenu(rid);
+
+	const roomMenuOptions = useMemo<GenericMenuItemProps[]>(() => {
+		if (hideDefaultOptions || !subscription) {
+			return [];
+		}
+
+		const options: (GenericMenuItemProps | false)[] = [
+			!isOmnichannelRoom && {
+				id: 'hideRoom',
+				icon: 'eye-off',
+				content: t('Hide'),
+				onClick: handleHide,
+			},
+			{
+				id: 'toggleRead',
+				icon: 'flag',
+				content: isUnread ? t('Mark_read') : t('Mark_unread'),
+				onClick: handleToggleRead,
+			},
+			canFavorite && {
+				id: 'toggleFavorite',
+				icon: isFavorite ? 'star-filled' : 'star',
+				content: isFavorite ? t('Unfavorite') : t('Favorite'),
+				onClick: handleToggleFavorite,
+			},
+			canLeave && {
+				id: 'leaveRoom',
+				icon: 'sign-out',
+				content: t('Leave_room'),
+				onClick: handleLeave,
+			},
+		];
+		return options.filter(Boolean) as GenericMenuItemProps[];
+	}, [
+		hideDefaultOptions,
+		subscription,
+		isOmnichannelRoom,
+		t,
+		handleHide,
+		isUnread,
+		handleToggleRead,
+		canFavorite,
+		isFavorite,
+		handleToggleFavorite,
+		canLeave,
+		handleLeave,
+	]);
+
+	const notificationsMenuOptions = useMemo<GenericMenuItemProps[]>(() => {
+		if (!subscription || hideDefaultOptions || isOmnichannelRoom || !href) {
+			return [];
+		}
+
+		const options: GenericMenuItemProps[] = [
+			{
+				id: 'turnOnNotifications',
+				icon: isNotificationEnabled ? 'bell' : 'bell-off',
+				content: isNotificationEnabled ? t('Turn_OFF') : t('Turn_ON'),
+				onClick: handleToggleNotification,
+			},
+			{
+				id: 'notifications',
+				icon: 'customize',
+				content: t('Preferences'),
+				onClick: () => router.navigate(`${href}/push-notifications` as LocationPathname),
+			},
+		];
+		return options.filter(Boolean);
+	}, [hideDefaultOptions, isNotificationEnabled, subscription, t, router, href, handleToggleNotification, isOmnichannelRoom]);
+
+	if (isOmnichannelRoom) {
+		return [
+			...(roomMenuOptions.length > 0 ? [{ title: '', items: roomMenuOptions }] : []),
+			...(prioritiesMenu.length > 0 ? [{ title: t('Priorities'), items: prioritiesMenu }] : []),
+		];
+	}
+
+	return [
+		...(roomMenuOptions.length > 0 ? [{ title: '', items: roomMenuOptions }] : []),
+		...(notificationsMenuOptions.length > 0 ? [{ title: t('Notifications'), items: notificationsMenuOptions }] : []),
+	];
+};

apps/meteor/client/views/navigation/sidepanel/index.ts

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

apps/meteor/client/views/navigation/sidepanel/omnichannel/InquireSidePanelItem.tsx

@@ -0,0 +1,80 @@
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { SidebarItemIcon } from '@rocket.chat/fuselage';
+import { escapeHTML } from '@rocket.chat/tools';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
+import { useUserId } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SidePanelOmnichannelBadges from './SidePanelOmnichannelBadges';
+import { OmnichannelRoomIcon } from '../../../../components/RoomIcon/OmnichannelRoomIcon';
+import type { LivechatInquiryLocalRecord } from '../../../../hooks/useLivechatInquiryStore';
+import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
+import { isIOsDevice } from '../../../../lib/utils/isIOsDevice';
+import { normalizeMessagePreview } from '../../../../lib/utils/normalizeMessagePreview/normalizeMessagePreview';
+import { useOmnichannelPriorities } from '../../../omnichannel/hooks/useOmnichannelPriorities';
+import SidePanelItem from '../SidepanelItem';
+import RoomMenu from '../SidepanelItem/RoomMenu';
+
+export type InquireSidePanelItemProps = {
+	room: LivechatInquiryLocalRecord;
+	openedRoom?: string;
+};
+
+const InquireSidePanelItem = ({ room, openedRoom, ...props }: InquireSidePanelItemProps) => {
+	const { t } = useTranslation();
+	const isAnonymous = !useUserId();
+
+	const highlighted = Boolean(room.alert);
+	const { alert, rid, t: type } = room;
+
+	const time = 'lastMessage' in room ? room.lastMessage?.ts : undefined;
+	const message =
+		room.lastMessage &&
+		`${escapeHTML(room.lastMessage.u.name || room.lastMessage.u.username)}: ${normalizeMessagePreview(room.lastMessage, t)}`;
+	const title = roomCoordinator.getRoomName(room.t, room) || '';
+	const href = roomCoordinator.getRouteLink(room.t, room) || '';
+
+	const badges = <>{isOmnichannelRoom(room) && <SidePanelOmnichannelBadges room={room} />}</>;
+
+	const isQueued = room.status === 'queued';
+	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
+
+	const menu =
+		!isIOsDevice && !isAnonymous && (!isQueued || (isQueued && isPriorityEnabled)) ? (
+			<RoomMenu
+				alert={alert}
+				rid={rid}
+				roomOpen={rid === openedRoom}
+				type={type}
+				name={title}
+				hideDefaultOptions={isQueued}
+				href={href || undefined}
+			/>
+		) : undefined;
+
+	return (
+		<SidePanelItem
+			href={href}
+			selected={rid === openedRoom}
+			title={title}
+			avatar={<RoomAvatar size='x20' room={{ ...room, _id: room.rid || room._id, type: room.t }} />}
+			icon={
+				room.source && (
+					<SidebarItemIcon
+						highlighted={highlighted}
+						icon={<OmnichannelRoomIcon placement='sidebar' source={room.source} status={room.v.status} size='x20' />}
+					/>
+				)
+			}
+			unread={highlighted}
+			time={time}
+			subtitle={message ? <span className='message-body--unstyled' dangerouslySetInnerHTML={{ __html: message }} /> : null}
+			badges={badges}
+			menu={menu}
+			{...props}
+		/>
+	);
+};
+
+export default memo(InquireSidePanelItem);

apps/meteor/client/views/navigation/sidepanel/omnichannel/SidePanelOmnichannelBadges/SidePanelOmnichannelBadges.tsx

@@ -0,0 +1,20 @@
+import type { IOmnichannelRoom } from '@rocket.chat/core-typings';
+
+import SidePanelPriorityTag from './SidePanelPriorityTag';
+import RoomActivityIcon from '../../../../omnichannel/components/RoomActivityIcon';
+import { useOmnichannelPriorities } from '../../../../omnichannel/hooks/useOmnichannelPriorities';
+
+export type SidePanelOmnichannelBadgesProps = { room: IOmnichannelRoom };
+
+const SidePanelOmnichannelBadges = ({ room }: SidePanelOmnichannelBadgesProps) => {
+	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
+
+	return (
+		<>
+			{isPriorityEnabled ? <SidePanelPriorityTag priorityWeight={room.priorityWeight} /> : null}
+			<RoomActivityIcon room={room} />
+		</>
+	);
+};
+
+export default SidePanelOmnichannelBadges;

apps/meteor/client/views/navigation/sidepanel/omnichannel/SidePanelOmnichannelBadges/SidePanelPriorityTag.tsx

@@ -0,0 +1,22 @@
+import type { LivechatPriorityWeight } from '@rocket.chat/core-typings';
+import { Icon, Tag } from '@rocket.chat/fuselage';
+
+import { useOmnichannelPrioritiesConfig } from '../../../../omnichannel/hooks/useOmnichannelPrioritiesConfig';
+
+export type SidePanelPriorityTagProps = { priorityWeight: LivechatPriorityWeight };
+
+const SidePanelPriorityTag = ({ priorityWeight }: SidePanelPriorityTagProps) => {
+	const prioritiesConfig = useOmnichannelPrioritiesConfig(priorityWeight, false);
+
+	if (!prioritiesConfig?.iconName) {
+		return null;
+	}
+
+	return (
+		<Tag icon={<Icon marginInlineEnd={4} size='x12' name={prioritiesConfig?.iconName} />} variant={prioritiesConfig?.variant}>
+			{prioritiesConfig?.name}
+		</Tag>
+	);
+};
+
+export default SidePanelPriorityTag;

apps/meteor/client/views/navigation/sidepanel/omnichannel/SidePanelOmnichannelBadges/index.ts

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

apps/meteor/client/views/navigation/sidepanel/omnichannel/tabs/SidePanelInProgress.tsx

@@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next';
+
+import { sidePanelFiltersConfig, useSidePanelRoomsListTab, useUnreadOnlyToggle } from '../../../contexts/RoomsNavigationContext';
+import SidePanel from '../../SidePanel';
+
+const SidePanelInProgress = () => {
+	const { t } = useTranslation();
+	const rooms = useSidePanelRoomsListTab('inProgress');
+	const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
+
+	return (
+		<SidePanel
+			title={t(sidePanelFiltersConfig.inProgress.title)}
+			currentTab='inProgress'
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms}
+		/>
+	);
+};
+
+export default SidePanelInProgress;

apps/meteor/client/views/navigation/sidepanel/omnichannel/tabs/SidePanelQueue.tsx

@@ -0,0 +1,36 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import {
+	sidePanelFiltersConfig,
+	useRedirectToDefaultTab,
+	useSidePanelQueueListTab,
+	useUnreadOnlyToggle,
+} from '../../../contexts/RoomsNavigationContext';
+import SidePanelInquiry from '../../SidePanelInquiry';
+
+const SidePanelQueue = () => {
+	const { t } = useTranslation();
+	const canViewOmnichannelQueue = usePermission('view-livechat-queue');
+
+	const rooms = useSidePanelQueueListTab();
+	const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
+
+	useRedirectToDefaultTab(!canViewOmnichannelQueue);
+
+	if (!canViewOmnichannelQueue) {
+		return null;
+	}
+
+	return (
+		<SidePanelInquiry
+			title={t(sidePanelFiltersConfig.queue.title)}
+			currentTab='queue'
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms}
+		/>
+	);
+};
+
+export default SidePanelQueue;

apps/meteor/client/views/navigation/sidepanel/omnichannel/tabs/SidepanelOnHold.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next';
+
+import { useHasLicenseModule } from '../../../../../hooks/useHasLicenseModule';
+import {
+	sidePanelFiltersConfig,
+	useRedirectToDefaultTab,
+	useSidePanelRoomsListTab,
+	useUnreadOnlyToggle,
+} from '../../../contexts/RoomsNavigationContext';
+import SidePanel from '../../SidePanel';
+
+const SidePanelOnHold = () => {
+	const { t } = useTranslation();
+	const rooms = useSidePanelRoomsListTab('onHold');
+	const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
+
+	const { data: hasEEModule = false } = useHasLicenseModule('livechat-enterprise');
+	useRedirectToDefaultTab(!hasEEModule);
+
+	if (!hasEEModule) {
+		return null;
+	}
+
+	return (
+		<SidePanel
+			title={t(sidePanelFiltersConfig.onHold.title)}
+			currentTab='onHold'
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms}
+		/>
+	);
+};
+
+export default SidePanelOnHold;

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

@@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next';
+
+import { sidePanelFiltersConfig, useSidePanelRoomsListTab, useUnreadOnlyToggle } from '../../contexts/RoomsNavigationContext';
+import SidePanel from '../SidePanel';
+
+const SidePanelAll = () => {
+	const { t } = useTranslation();
+	const rooms = useSidePanelRoomsListTab('all');
+	const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
+
+	return (
+		<SidePanel
+			title={t(sidePanelFiltersConfig.all.title)}
+			currentTab='all'
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms}
+		/>
+	);
+};
+
+export default SidePanelAll;

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

@@ -0,0 +1,28 @@
+import type { ISubscription } from '@rocket.chat/core-typings';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
+
+import { useUnreadOnlyToggle } from '../../contexts/RoomsNavigationContext';
+import SidePanel from '../SidePanel';
+import { useChannelsChildrenList } from '../hooks/useChannelsChildrenList';
+
+export type SidePanelChannelsProps = { parentRid: string; subscription: ISubscription };
+
+const SidePanelChannels = ({ parentRid, subscription }: SidePanelChannelsProps) => {
+	const isDirectSubscription = subscription?.t === 'd';
+
+	const username = useUserDisplayName({ name: subscription?.fname, username: subscription?.name });
+	const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
+	const rooms = useChannelsChildrenList(parentRid, unreadOnly);
+
+	return (
+		<SidePanel
+			title={(isDirectSubscription ? username : subscription?.fname) || subscription.name}
+			currentTab={isDirectSubscription ? 'directMessages' : 'channels'}
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms}
+		/>
+	);
+};
+
+export default SidePanelChannels;

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

@@ -0,0 +1,34 @@
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import {
+	sidePanelFiltersConfig,
+	useRedirectToDefaultTab,
+	useSidePanelRoomsListTab,
+	useUnreadOnlyToggle,
+} from '../../contexts/RoomsNavigationContext';
+import SidePanel from '../SidePanel';
+
+const SidePanelDiscussions = () => {
+	const { t } = useTranslation();
+	const rooms = useSidePanelRoomsListTab('discussions');
+	const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
+	const isDiscussionEnabled = useSetting('Discussion_enabled');
+	useRedirectToDefaultTab(!isDiscussionEnabled);
+
+	if (!isDiscussionEnabled) {
+		return null;
+	}
+
+	return (
+		<SidePanel
+			title={t(sidePanelFiltersConfig.discussions.title)}
+			currentTab='discussions'
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms}
+		/>
+	);
+};
+
+export default SidePanelDiscussions;

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

@@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next';
+
+import { sidePanelFiltersConfig, useSidePanelRoomsListTab, useUnreadOnlyToggle } from '../../contexts/RoomsNavigationContext';
+import SidePanel from '../SidePanel';
+
+const SidePanelFavorites = () => {
+	const { t } = useTranslation();
+	const rooms = useSidePanelRoomsListTab('favorites');
+	const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
+
+	return (
+		<SidePanel
+			title={t(sidePanelFiltersConfig.favorites.title)}
+			currentTab='favorites'
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms}
+		/>
+	);
+};
+
+export default SidePanelFavorites;

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

@@ -0,0 +1,28 @@
+import { useUserSubscription } from '@rocket.chat/ui-contexts';
+
+import SidePanelAll from './SidePanelAll';
+import SidePanelChannels from './SidePanelChannels';
+import SidePanelTeams from './SidePanelTeams';
+import { withErrorBoundary } from '../../../../components/withErrorBoundary';
+import { useSidePanelFilter } from '../../contexts/RoomsNavigationContext';
+
+export type SidePanelRoomsProps = { parentRid: string };
+
+const SidePanelRooms = ({ parentRid }: SidePanelRoomsProps) => {
+	const [currentTab] = useSidePanelFilter();
+	const subscription = useUserSubscription(parentRid);
+
+	if (!subscription) {
+		return <SidePanelAll />;
+	}
+
+	switch (currentTab) {
+		case 'teams':
+			return <SidePanelTeams parentRid={parentRid} subscription={subscription} />;
+		case 'channels':
+		case 'directMessages':
+			return <SidePanelChannels parentRid={parentRid} subscription={subscription} />;
+	}
+};
+
+export default withErrorBoundary(SidePanelRooms);

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

@@ -0,0 +1,24 @@
+import type { ISubscription } from '@rocket.chat/core-typings';
+
+import { useUnreadOnlyToggle } from '../../contexts/RoomsNavigationContext';
+import SidePanel from '../SidePanel';
+import { useChannelsChildrenList } from '../hooks/useChannelsChildrenList';
+
+export type SidePanelTeamsProps = { parentRid: string; subscription: ISubscription };
+
+const SidePanelTeams = ({ parentRid, subscription }: SidePanelTeamsProps) => {
+	const [unreadOnly, toggleUnreadOnly] = useUnreadOnlyToggle();
+	const rooms = useChannelsChildrenList(parentRid, unreadOnly, subscription?.teamId);
+
+	return (
+		<SidePanel
+			title={subscription?.fname || subscription?.name}
+			currentTab='teams'
+			unreadOnly={unreadOnly}
+			toggleUnreadOnly={toggleUnreadOnly}
+			rooms={rooms}
+		/>
+	);
+};
+
+export default SidePanelTeams;