chore(POC): Siderail refactor

apps/meteor/.storybook/mocks/meteor.ts

@@ -29,6 +29,11 @@ export const Meteor = {
 	users: {},
 };
 
+export const DDPCommon = {
+	parseDDP: () => undefined,
+	stringifyDDP: () => '',
+};
+
 export const Tracker = {
 	autorun: () => ({
 		stop: () => {},
@@ -94,5 +99,3 @@ export const Session = {
 	get: () => {},
 	set: () => {},
 };
-
-export const DDPCommon = {};

apps/meteor/client/components/HorizontalDivider/HorizontalDivider.tsx

@@ -0,0 +1,8 @@
+import { Divider } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+type HorizontalDividerProps = Omit<ComponentProps<typeof Divider>, 'vertical'>;
+
+const HorizontalDivider = (props: HorizontalDividerProps) => <Divider {...props} vertical={false} />;
+
+export default HorizontalDivider;

apps/meteor/client/components/HorizontalDivider/index.ts

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

apps/meteor/client/sidebar/SidebarRail/SidebarRail.stories.tsx

@@ -0,0 +1,64 @@
+import { Box } from '@rocket.chat/fuselage';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { SessionContext } from '@rocket.chat/ui-contexts';
+import type { SessionContextValue } from '@rocket.chat/ui-contexts';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactNode } from 'react';
+
+import SidebarRail from './SidebarRail';
+
+const sessionMock = (state: Record<string, unknown>): SessionContextValue => ({
+	query: (name) => [() => () => undefined, () => state[name]],
+	dispatch: () => undefined,
+});
+
+const baseRoot = () =>
+	mockAppRoot().withSetting('Layout_Show_Home_Button', true).withTranslations('en', 'core', {
+		Sidebar: 'Sidebar',
+		Home: 'Home',
+		Create_new: 'Create new',
+		Voice_Call: 'Voice Call',
+		Pages_and_actions: 'Pages and actions',
+		Workspace_and_user_preferences: 'Workspace and user preferences',
+	});
+
+export default {
+	title: 'Sidebar/SidebarRail',
+
+	component: SidebarRail,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	decorators: [
+		(Story) => (
+			<Box height='100vh' display='flex'>
+				<Story />
+			</Box>
+		),
+	],
+} satisfies Meta<typeof SidebarRail>;
+
+type Story = StoryObj<typeof SidebarRail>;
+
+export const Anonymous: Story = {
+	decorators: [baseRoot().buildStoryDecorator()],
+};
+
+export const LoggedIn: Story = {
+	decorators: [baseRoot().withJohnDoe().buildStoryDecorator()],
+};
+
+export const WithUnreadBadge: Story = {
+	decorators: [
+		baseRoot()
+			.withJohnDoe()
+			.wrap((children: ReactNode) => <SessionContext.Provider value={sessionMock({ unread: 5 })}>{children}</SessionContext.Provider>)
+			.buildStoryDecorator(),
+	],
+};
+
+export const WithCreatePermissions: Story = {
+	decorators: [
+		baseRoot().withJohnDoe().withPermission('create-c').withPermission('create-p').withPermission('create-d').buildStoryDecorator(),
+	],
+};

apps/meteor/client/sidebar/SidebarRail/SidebarRail.tsx

@@ -0,0 +1,61 @@
+import { Box, NavBarGroup } from '@rocket.chat/fuselage';
+import { useUser } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SidebarRailCreateNew from './SidebarRailCreateNew';
+import SidebarRailDivider from './SidebarRailDivider';
+import SidebarRailLoginPage from './SidebarRailLoginPage';
+import SidebarRailPhone from './SidebarRailPhone';
+import SidebarRailSort from './SidebarRailSort';
+import NavBarItemDirectoryPage from '../../navbar/NavBarPagesGroup/NavBarItemDirectoryPage';
+import NavBarItemHomePage from '../../navbar/NavBarPagesGroup/NavBarItemHomePage';
+import NavBarItemMarketPlaceMenu from '../../navbar/NavBarPagesGroup/NavBarItemMarketPlaceMenu';
+import { NavBarItemAdministrationMenu, UserMenu } from '../../navbar/NavBarSettingsToolbar';
+
+const SidebarRail = () => {
+	const { t } = useTranslation();
+	const user = useUser();
+
+	return (
+		<Box
+			is='nav'
+			aria-label={t('Sidebar_rail')}
+			className='rcx-sidebar-rail'
+			backgroundColor='surface-sidebar'
+			borderInlineEndWidth='default'
+			borderInlineEndStyle='solid'
+			borderInlineEndColor='stroke-light'
+			display='flex'
+			flexDirection='column'
+			alignItems='stretch'
+			width='x44'
+			height='full'
+			// secondarySidebar Feature Preview animates transitions between panels.
+			// This zIndex ensures the panels transition stays behind the SideRail
+			zIndex={10}
+		>
+			<Box flexGrow={1} minHeight={0} overflow='hidden auto' padding={8}>
+				<NavBarGroup vertical aria-label={t('Pages_and_actions')}>
+					<NavBarItemHomePage title={t('Home')} />
+					<SidebarRailSort />
+					<SidebarRailCreateNew />
+				</NavBarGroup>
+				<SidebarRailDivider />
+				<NavBarGroup vertical aria-label={t('Voice_Call')}>
+					<SidebarRailPhone />
+					<NavBarItemDirectoryPage title={t('Directory')} />
+					<NavBarItemMarketPlaceMenu />
+				</NavBarGroup>
+			</Box>
+			<Box padding={8}>
+				<NavBarGroup vertical aria-label={t('Workspace_and_user_preferences')}>
+					<NavBarItemAdministrationMenu />
+					{user ? <UserMenu user={user} /> : <SidebarRailLoginPage />}
+				</NavBarGroup>
+			</Box>
+		</Box>
+	);
+};
+
+export default memo(SidebarRail);

apps/meteor/client/sidebar/SidebarRail/SidebarRailCallPanel.tsx

@@ -0,0 +1,29 @@
+import { Box, Sidepanel } from '@rocket.chat/fuselage';
+import { FeaturePreview, FeaturePreviewOn, FeaturePreviewOff } from '@rocket.chat/ui-client';
+import { useLayout } from '@rocket.chat/ui-contexts';
+import { InlineMediaCallWidget } from '@rocket.chat/ui-voip';
+import { useTranslation } from 'react-i18next';
+
+import SidebarPortal from '../../portals/SidebarPortal';
+
+const SidebarRailCallPanel = () => {
+	const { t } = useTranslation();
+	const { isEmbedded: embeddedLayout, isMobile } = useLayout();
+
+	return (
+		<FeaturePreview feature='sidebarRail' disabled={embeddedLayout || isMobile}>
+			<FeaturePreviewOn>
+				<SidebarPortal>
+					<Sidepanel role='complementary' aria-label={t('Calls')}>
+						<Box padding={16}>
+							<InlineMediaCallWidget />
+						</Box>
+					</Sidepanel>
+				</SidebarPortal>
+			</FeaturePreviewOn>
+			<FeaturePreviewOff>{null}</FeaturePreviewOff>
+		</FeaturePreview>
+	);
+};
+
+export default SidebarRailCallPanel;

apps/meteor/client/sidebar/SidebarRail/SidebarRailCreateNew.tsx

@@ -0,0 +1,22 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCreateNewMenu } from '../../navbar/NavBarPagesGroup/hooks/useCreateNewMenu';
+
+type SidebarRailCreateNewProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const SidebarRailCreateNew = (props: SidebarRailCreateNewProps) => {
+	const { t } = useTranslation();
+
+	const sections = useCreateNewMenu();
+
+	if (sections.length === 0) {
+		return null;
+	}
+
+	return <GenericMenu icon='pencil-box' sections={sections} title={t('Create_new')} is={NavBarItem} placement='right-start' {...props} />;
+};
+
+export default SidebarRailCreateNew;

apps/meteor/client/sidebar/SidebarRail/SidebarRailDivider.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import HorizontalDivider from '../../components/HorizontalDivider';
+
+type SidebarRailDividerProps = ComponentProps<typeof HorizontalDivider>;
+
+const SidebarRailDivider = (props: SidebarRailDividerProps) => (
+	<HorizontalDivider marginBlock={16} marginInline={4} borderBlockStartColor='stroke-light' {...props} />
+);
+
+export default SidebarRailDivider;

apps/meteor/client/sidebar/SidebarRail/SidebarRailHeader.tsx

@@ -0,0 +1,15 @@
+import { Box, NavBar as NavBarComponent, NavBarSection } from '@rocket.chat/fuselage';
+
+import NavBarNavigation from '../../navbar/NavBarNavigation';
+
+const SidebarRailHeader = () => (
+	<NavBarComponent aria-label='header' style={{ paddingInline: '0.5rem' }}>
+		<NavBarSection>
+			<Box is='img' src='/images/logo/icon.svg' alt='Rocket.Chat' size='x28' />
+		</NavBarSection>
+		<NavBarNavigation />
+		<NavBarSection />
+	</NavBarComponent>
+);
+
+export default SidebarRailHeader;

apps/meteor/client/sidebar/SidebarRail/SidebarRailLoginPage.tsx

@@ -0,0 +1,15 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useSessionDispatch } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type SidebarRailLoginPageProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const SidebarRailLoginPage = (props: SidebarRailLoginPageProps) => {
+	const setForceLogin = useSessionDispatch('forceLogin');
+	const { t } = useTranslation();
+
+	return <NavBarItem {...props} icon='login' title={t('Login')} onClick={() => setForceLogin(true)} />;
+};
+
+export default SidebarRailLoginPage;

apps/meteor/client/sidebar/SidebarRail/SidebarRailPhone.tsx

@@ -0,0 +1,38 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useCurrentRoutePath, useRouter } from '@rocket.chat/ui-contexts';
+import { useMediaCallAction } from '@rocket.chat/ui-voip';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type SidebarRailPhoneProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const SidebarRailPhone = (props: SidebarRailPhoneProps) => {
+	const { t } = useTranslation();
+	const callAction = useMediaCallAction();
+	const router = useRouter();
+	const currentRoute = useCurrentRoutePath();
+
+	const isActive = currentRoute?.includes('/call-history') ?? false;
+
+	const handleClick = useStableCallback(() => {
+		router.navigate('/call-history');
+	});
+
+	if (!callAction) {
+		return null;
+	}
+
+	return (
+		<NavBarItem
+			{...props}
+			title={t('Calls')}
+			icon='phone'
+			pressed={isActive}
+			aria-current={isActive ? 'page' : undefined}
+			onClick={handleClick}
+		/>
+	);
+};
+
+export default SidebarRailPhone;

apps/meteor/client/sidebar/SidebarRail/SidebarRailSort.tsx

@@ -0,0 +1,28 @@
+import { NavBarItem } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSortMenu } from '../../navbar/NavBarPagesGroup/hooks/useSortMenu';
+
+type SidebarRailSortProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const SidebarRailSort = (props: SidebarRailSortProps) => {
+	const { t } = useTranslation();
+
+	const sections = useSortMenu();
+
+	return (
+		<GenericMenu
+			icon='sort'
+			sections={sections}
+			title={t('Display')}
+			selectionMode='multiple'
+			is={NavBarItem}
+			placement='right-start'
+			{...props}
+		/>
+	);
+};
+
+export default SidebarRailSort;

apps/meteor/client/sidebar/SidebarRail/index.ts

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

apps/meteor/client/startup/routes.tsx

@@ -25,6 +25,7 @@ const OAuthAuthorizationPage = lazy(() => import('../views/oauth/OAuthAuthorizat
 const OAuthErrorPage = lazy(() => import('../views/oauth/OAuthErrorPage'));
 const NotFoundPage = lazy(() => import('../views/notFound/NotFoundPage'));
 const CallHistoryPage = lazy(() => import('../views/mediaCallHistory/CallHistoryPage'));
+const SidebarRailCallPanel = lazy(() => import('../sidebar/SidebarRail/SidebarRailCallPanel'));
 const SearchPage = lazy(() => import('../views/search/SearchPage'));
 
 declare module '@rocket.chat/ui-contexts' {
@@ -253,6 +254,7 @@ router.defineRoutes([
 		element: appLayout.wrap(
 			<MainLayout>
 				<CallHistoryPage />
+				<SidebarRailCallPanel />
 			</MainLayout>,
 		),
 	},

apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.spec.tsx

@@ -1,7 +1,6 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { useCurrentRoutePath, useRouter } from '@rocket.chat/ui-contexts';
 import { render } from '@testing-library/react';
-import type { ReactNode } from 'react';
 
 import LayoutWithSidebar from './LayoutWithSidebar';
 
@@ -12,19 +11,17 @@ jest.mock('@rocket.chat/ui-contexts', () => ({
 }));
 
 jest.mock('../../../navbar', () => () => <div>NavBar</div>);
-jest.mock('../../../sidebar', () => () => <div>Sidebar</div>);
-jest.mock('../../navigation', () => () => <div>NavigationRegion</div>);
+jest.mock('../../../sidebar/SidebarRail', () => () => <div>SidebarRail</div>);
+jest.mock('../../../sidebar/SidebarRail/SidebarRailHeader', () => () => <div>SidebarRailHeader</div>);
 jest.mock('./AccessibilityShortcut', () => () => <div>AccessibilityShortcut</div>);
-jest.mock('../../navigation/providers/RoomsNavigationProvider', () => ({
-	__esModule: true,
-	default: ({ children }: { children: ReactNode }) => <>{children}</>,
-}));
-
+jest.mock('../../navigation/providers/RoomsNavigationProvider', () => () => <div>Navigationprovider</div>);
+jest.mock('../../navigation', () => () => <div>NavigationRegion</div>);
+jest.mock('../../../sidebar', () => () => <div>Sidebar</div>);
 jest.mock('@rocket.chat/ui-client', () => ({
 	...jest.requireActual('@rocket.chat/ui-client'),
-	FeaturePreview: ({ children }: { children: ReactNode }) => <>{children}</>,
-	FeaturePreviewOn: ({ children }: { children: ReactNode }) => <>{children}</>,
-	FeaturePreviewOff: ({ children }: { children: ReactNode }) => <>{children}</>,
+	FeaturePreview: ({ children }: any) => children,
+	FeaturePreviewOn: ({ children }: any) => children,
+	FeaturePreviewOff: () => null,
 }));
 
 const mockedUseCurrentRoutePath = useCurrentRoutePath as jest.MockedFunction<typeof useCurrentRoutePath>;