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

apps/meteor/client/views/home/CustomHomePage.tsx

@@ -0,0 +1,17 @@
+import { Page, PageScrollableContentWithShadow } from '@rocket.chat/ui-client';
+
+import HomePageHeader from './HomePageHeader';
+import CustomContentCard from './cards/CustomContentCard';
+
+const CustomHomePage = () => {
+	return (
+		<Page color='default' background='tint'>
+			<HomePageHeader />
+			<PageScrollableContentWithShadow>
+				<CustomContentCard />
+			</PageScrollableContentWithShadow>
+		</Page>
+	);
+};
+
+export default CustomHomePage;

apps/meteor/client/views/home/CustomHomePageContent.tsx

@@ -0,0 +1,14 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import { useMemo } from 'react';
+
+const CustomHomePageContent = (props: ComponentProps<typeof Box>) => {
+	const body = useSetting('Layout_Home_Body', '');
+
+	const dangerous = useMemo(() => ({ __html: body }), [body]);
+
+	return <Box withRichContent dangerouslySetInnerHTML={dangerous} {...props} />;
+};
+
+export default CustomHomePageContent;

apps/meteor/client/views/home/DefaultHomePage.tsx

@@ -0,0 +1,51 @@
+import { Box, CardGroup } from '@rocket.chat/fuselage';
+import { PageScrollableContent, Page } from '@rocket.chat/ui-client';
+import { useAtLeastOnePermission, useSetting, useTranslation, useRole, usePermission } from '@rocket.chat/ui-contexts';
+
+import HomePageHeader from './HomePageHeader';
+import AddUsersCard from './cards/AddUsersCard';
+import CreateChannelsCard from './cards/CreateChannelsCard';
+import CustomContentCard from './cards/CustomContentCard';
+import DesktopAppsCard from './cards/DesktopAppsCard';
+import DocumentationCard from './cards/DocumentationCard';
+import JoinRoomsCard from './cards/JoinRoomsCard';
+import MobileAppsCard from './cards/MobileAppsCard';
+
+const CREATE_CHANNEL_PERMISSIONS = ['create-c', 'create-p'];
+
+const DefaultHomePage = () => {
+	const t = useTranslation();
+	const canAddUsers = usePermission('view-user-administration');
+	const isAdmin = useRole('admin');
+	const canCreateChannel = useAtLeastOnePermission(CREATE_CHANNEL_PERMISSIONS);
+	const workspaceName = useSetting('Site_Name');
+	const isCustomContentBodyEmpty = useSetting('Layout_Home_Body', '') === '';
+	const isCustomContentVisible = useSetting('Layout_Home_Custom_Block_Visible', false);
+
+	return (
+		<Page color='default' background='tint'>
+			<HomePageHeader />
+			<PageScrollableContent>
+				<Box is='h2' fontScale='h1' marginBlock={20}>
+					{t('Welcome_to_workspace', { Site_Name: workspaceName || 'Rocket.Chat' })}
+				</Box>
+				<Box is='h3' fontScale='h3' marginBlock={16}>
+					{t('Some_ideas_to_get_you_started')}
+				</Box>
+				<Box marginInline='neg-x8'>
+					<CardGroup wrap stretch>
+						{canAddUsers && <AddUsersCard />}
+						{canCreateChannel && <CreateChannelsCard />}
+						<JoinRoomsCard />
+						<MobileAppsCard />
+						<DesktopAppsCard />
+						<DocumentationCard />
+						{(isAdmin || (isCustomContentVisible && !isCustomContentBodyEmpty)) && <CustomContentCard />}
+					</CardGroup>
+				</Box>
+			</PageScrollableContent>
+		</Page>
+	);
+};
+
+export default DefaultHomePage;

apps/meteor/client/views/home/HomePage.tsx

@@ -0,0 +1,16 @@
+import { useSetting } from '@rocket.chat/ui-contexts';
+
+import CustomHomePage from './CustomHomePage';
+import DefaultHomePage from './DefaultHomePage';
+
+const HomePage = () => {
+	const customOnly = useSetting('Layout_Custom_Body_Only');
+
+	if (customOnly) {
+		return <CustomHomePage />;
+	}
+
+	return <DefaultHomePage />;
+};
+
+export default HomePage;

apps/meteor/client/views/home/HomePageHeader.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@rocket.chat/fuselage';
+import { PageHeader } from '@rocket.chat/ui-client';
+import { useSetting, useTranslation, useAllPermissions, useRoute } from '@rocket.chat/ui-contexts';
+
+const EDIT_LAYOUT_PERMISSIONS = ['view-privileged-setting', 'edit-privileged-setting', 'manage-selected-settings'];
+
+const HomepageHeader = () => {
+	const t = useTranslation();
+	const title = useSetting('Layout_Home_Title', 'Home');
+	const canEditLayout = useAllPermissions(EDIT_LAYOUT_PERMISSIONS);
+	const settingsRoute = useRoute('admin-settings');
+
+	return (
+		<PageHeader title={title}>
+			{canEditLayout && (
+				<Button icon='pencil' onClick={() => settingsRoute.push({ group: 'Layout' })}>
+					{t('Customize')}
+				</Button>
+			)}
+		</PageHeader>
+	);
+};
+
+export default HomepageHeader;

apps/meteor/client/views/home/HomeSkeleton.tsx

@@ -0,0 +1,24 @@
+import { Box } from '@rocket.chat/fuselage';
+import { Page } from '@rocket.chat/ui-client';
+
+import ListSkeleton from '../../components/ListSkeleton';
+import { RoomSkeleton } from '../room';
+import HeaderSkeleton from '../room/Header/HeaderSkeleton';
+
+const HomeSkeleton = () => {
+	return (
+		<Page>
+			<Box display='flex' flexDirection='row' height='full'>
+				<Box flexGrow={0.15}>
+					<HeaderSkeleton />
+					<ListSkeleton listCount={3} />
+				</Box>
+				<Box flexGrow={0.85}>
+					<RoomSkeleton />
+				</Box>
+			</Box>
+		</Page>
+	);
+};
+
+export default HomeSkeleton;

apps/meteor/client/views/home/cards/AddUsersCard.tsx

@@ -0,0 +1,30 @@
+import type { Card } from '@rocket.chat/fuselage';
+import { useTranslation, useRouter } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+
+import { GenericCard, GenericCardButton } from '../../../components/GenericCard';
+
+const AddUsersCard = (props: Omit<ComponentProps<typeof Card>, 'type'>) => {
+	const t = useTranslation();
+
+	const router = useRouter();
+	const handleOpenUsersRoute = (): void => {
+		router.navigate('/admin/users');
+	};
+
+	return (
+		<GenericCard
+			title={t('Add_users')}
+			body={t('Invite_and_add_members_to_this_workspace_to_start_communicating')}
+			buttons={[
+				<GenericCardButton key={1} onClick={handleOpenUsersRoute} primary>
+					{t('Add_users')}
+				</GenericCardButton>,
+			]}
+			width='x340'
+			{...props}
+		/>
+	);
+};
+
+export default AddUsersCard;

apps/meteor/client/views/home/cards/CreateChannelsCard.tsx

@@ -0,0 +1,29 @@
+import type { Card } from '@rocket.chat/fuselage';
+import { useTranslation, useSetModal } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+
+import { GenericCard, GenericCardButton } from '../../../components/GenericCard';
+import CreateChannelModal from '../../../navbar/NavBarPagesGroup/actions/CreateChannelModal';
+
+const CreateChannelsCard = (props: Omit<ComponentProps<typeof Card>, 'type'>) => {
+	const t = useTranslation();
+	const setModal = useSetModal();
+
+	const openCreateChannelModal = (): void => setModal(<CreateChannelModal onClose={(): void => setModal(null)} />);
+
+	return (
+		<GenericCard
+			title={t('Create_channels')}
+			body={t('Create_a_public_channel_that_new_workspace_members_can_join')}
+			buttons={[
+				<GenericCardButton key={1} onClick={openCreateChannelModal}>
+					{t('Create_channel')}
+				</GenericCardButton>,
+			]}
+			width='x340'
+			{...props}
+		/>
+	);
+};
+
+export default CreateChannelsCard;

apps/meteor/client/views/home/cards/CustomContentCard.tsx

@@ -0,0 +1,101 @@
+import { Box, Button, Card, CardBody, CardControls, CardHeader, Icon, Tag } from '@rocket.chat/fuselage';
+import { useRole, useSettingSetValue, useSetting, useToastMessageDispatch, useRouter } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useIsEnterprise } from '../../../hooks/useIsEnterprise';
+import CustomHomepageContent from '../CustomHomePageContent';
+
+const CustomContentCard = (props: Omit<ComponentProps<typeof Card>, 'type'>) => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const router = useRouter();
+
+	const { data } = useIsEnterprise();
+	const isAdmin = useRole('admin');
+	const customContentBody = useSetting('Layout_Home_Body', '');
+	const isCustomContentBodyEmpty = customContentBody === '';
+	const isCustomContentVisible = useSetting('Layout_Home_Custom_Block_Visible', false);
+	const isCustomContentOnly = useSetting('Layout_Custom_Body_Only', false);
+
+	const setCustomContentVisible = useSettingSetValue('Layout_Home_Custom_Block_Visible');
+	const setCustomContentOnly = useSettingSetValue('Layout_Custom_Body_Only');
+
+	const handleChangeCustomContentVisibility = async () => {
+		try {
+			await setCustomContentVisible(!isCustomContentVisible);
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	const handleOnlyShowCustomContent = async () => {
+		try {
+			await setCustomContentOnly(!isCustomContentOnly);
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	const isEnterprise = data?.isEnterprise;
+	const willNotShowCustomContent = isCustomContentBodyEmpty || !isCustomContentVisible;
+
+	const userVisibilityTooltipText = isCustomContentVisible ? t('Now_Its_Visible_For_Everyone') : t('Now_Its_Visible_Only_For_Admins');
+
+	let customContentOnlyTooltipText = t('It_Will_Hide_All_Other_Content_Blocks_In_The_Homepage');
+	if (willNotShowCustomContent) {
+		customContentOnlyTooltipText = t('Action_Available_After_Custom_Content_Added_And_Visible');
+	} else if (isCustomContentOnly) {
+		customContentOnlyTooltipText = t('It_Will_Show_All_Other_Content_Blocks_In_The_Homepage');
+	}
+
+	if (isAdmin) {
+		return (
+			<Card role='region' aria-label={t('Custom_content', 'Custom content')} {...props}>
+				<CardHeader>
+					<Tag>
+						<Icon marginInlineEnd={4} name={willNotShowCustomContent ? 'eye-off' : 'eye'} size='x12' />
+						{willNotShowCustomContent ? t('Not_Visible_To_Workspace') : t('Visible_To_Workspace')}
+					</Tag>
+				</CardHeader>
+				<CardBody>{isCustomContentBodyEmpty ? t('Homepage_Custom_Content_Default_Message') : <CustomHomepageContent />}</CardBody>
+				<CardControls>
+					<Button medium onClick={() => router.navigate('/admin/settings/Layout')} title={t('Layout_Home_Page_Content')}>
+						{t('Customize_Content')}
+					</Button>
+					<Button
+						icon={willNotShowCustomContent ? 'eye' : 'eye-off'}
+						disabled={isCustomContentBodyEmpty || (isCustomContentVisible && isCustomContentOnly)}
+						title={isCustomContentBodyEmpty ? t('Action_Available_After_Custom_Content_Added') : userVisibilityTooltipText}
+						onClick={handleChangeCustomContentVisibility}
+						medium
+					>
+						{willNotShowCustomContent ? t('Show_To_Workspace') : t('Hide_On_Workspace')}
+					</Button>
+					<Button
+						icon='lightning'
+						disabled={willNotShowCustomContent || !isEnterprise}
+						title={!isEnterprise ? t('Premium_only') : customContentOnlyTooltipText}
+						onClick={handleOnlyShowCustomContent}
+						medium
+					>
+						{!isCustomContentOnly ? t('Show_Only_This_Content') : t('Show_default_content')}
+					</Button>
+				</CardControls>
+			</Card>
+		);
+	}
+
+	if (!willNotShowCustomContent && !isCustomContentOnly) {
+		return (
+			<Card>
+				<Box marginBlock={8}>
+					<CustomHomepageContent role='status' aria-label={customContentBody} />
+				</Box>
+			</Card>
+		);
+	}
+	return <CustomHomepageContent role='status' aria-label={customContentBody} />;
+};
+
+export default CustomContentCard;

apps/meteor/client/views/home/cards/DesktopAppsCard.tsx

@@ -0,0 +1,38 @@
+import type { Card } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { GenericCard, GenericCardButton } from '../../../components/GenericCard';
+import { useExternalLink } from '../../../hooks/useExternalLink';
+import { links } from '../../../lib/links';
+
+const WINDOWS_APP_URL = links.go.desktopAppWindows;
+const LINUX_APP_URL = links.go.desktopAppLinux;
+const MAC_APP_URL = links.go.desktopAppMac;
+
+const DesktopAppsCard = (props: Omit<ComponentProps<typeof Card>, 'type'>) => {
+	const { t } = useTranslation();
+	const handleOpenLink = useExternalLink();
+
+	return (
+		<GenericCard
+			title={t('Desktop_apps')}
+			body={t('Install_rocket_chat_on_your_preferred_desktop_platform')}
+			buttons={[
+				<GenericCardButton key={1} onClick={() => handleOpenLink(WINDOWS_APP_URL)} role='link'>
+					{t('Platform_Windows')}
+				</GenericCardButton>,
+				<GenericCardButton key={2} onClick={() => handleOpenLink(LINUX_APP_URL)} role='link'>
+					{t('Platform_Linux')}
+				</GenericCardButton>,
+				<GenericCardButton key={3} onClick={() => handleOpenLink(MAC_APP_URL)} role='link'>
+					{t('Platform_Mac')}
+				</GenericCardButton>,
+			]}
+			width='x340'
+			{...props}
+		/>
+	);
+};
+
+export default DesktopAppsCard;

apps/meteor/client/views/home/cards/DocumentationCard.tsx

@@ -0,0 +1,30 @@
+import type { Card } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { GenericCard, GenericCardButton } from '../../../components/GenericCard';
+import { useExternalLink } from '../../../hooks/useExternalLink';
+import { links } from '../../../lib/links';
+
+const DOCS_URL = links.go.documentation;
+
+const DocumentationCard = (props: Omit<ComponentProps<typeof Card>, 'type'>) => {
+	const { t } = useTranslation();
+	const handleOpenLink = useExternalLink();
+
+	return (
+		<GenericCard
+			title={t('Documentation')}
+			body={t('Learn_how_to_unlock_the_myriad_possibilities_of_rocket_chat')}
+			buttons={[
+				<GenericCardButton key={1} onClick={() => handleOpenLink(DOCS_URL)} role='link'>
+					{t('See_documentation')}
+				</GenericCardButton>,
+			]}
+			width='x340'
+			{...props}
+		/>
+	);
+};
+
+export default DocumentationCard;

apps/meteor/client/views/home/cards/JoinRoomsCard.tsx

@@ -0,0 +1,30 @@
+import type { Card } from '@rocket.chat/fuselage';
+import { useTranslation, useRouter } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+
+import { GenericCard, GenericCardButton } from '../../../components/GenericCard';
+
+const JoinRoomsCard = (props: Omit<ComponentProps<typeof Card>, 'type'>) => {
+	const t = useTranslation();
+
+	const router = useRouter();
+	const handleDirectory = (): void => {
+		router.navigate('/directory');
+	};
+
+	return (
+		<GenericCard
+			title={t('Join_rooms')}
+			body={t('Discover_public_channels_and_teams_in_the_workspace_directory')}
+			buttons={[
+				<GenericCardButton key={1} onClick={handleDirectory}>
+					{t('Open_directory')}
+				</GenericCardButton>,
+			]}
+			width='x340'
+			{...props}
+		/>
+	);
+};
+
+export default JoinRoomsCard;

apps/meteor/client/views/home/cards/MobileAppsCard.tsx

@@ -0,0 +1,34 @@
+import type { Card } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { GenericCard, GenericCardButton } from '../../../components/GenericCard';
+import { useExternalLink } from '../../../hooks/useExternalLink';
+import { links } from '../../../lib/links';
+
+const GOOGLE_PLAY_URL = links.go.mobileAppGoogle;
+const APP_STORE_URL = links.go.mobileAppApple;
+
+const MobileAppsCard = (props: Omit<ComponentProps<typeof Card>, 'type'>) => {
+	const { t } = useTranslation();
+	const handleOpenLink = useExternalLink();
+
+	return (
+		<GenericCard
+			title={t('Mobile_apps')}
+			body={t('Take_rocket_chat_with_you_with_mobile_applications')}
+			buttons={[
+				<GenericCardButton key={1} onClick={() => handleOpenLink(GOOGLE_PLAY_URL)} role='link'>
+					{t('Google_Play')}
+				</GenericCardButton>,
+				<GenericCardButton key={2} onClick={() => handleOpenLink(APP_STORE_URL)} role='link'>
+					{t('App_Store')}
+				</GenericCardButton>,
+			]}
+			width='x340'
+			{...props}
+		/>
+	);
+};
+
+export default MobileAppsCard;