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

apps/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx

@@ -0,0 +1,32 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Label } from '@rocket.chat/fuselage';
+import { useContext } from 'react';
+
+import ProjectsList from './ProjectsList/ProjectsList';
+import { context, createNewProjectAction } from '../../Context';
+import CreateNewScreenButton from '../ScreenThumbnail/CreateNewScreenButton';
+
+const HomeContainer = () => {
+	const { dispatch } = useContext(context);
+	return (
+		<Box minWidth='100%' display='flex' justifyContent='center' height='var(--content-height)' paddingBlockStart='30px'>
+			<Box
+				width='max-content'
+				minWidth='70%'
+				display='flex'
+				flexDirection='column'
+				className={css`
+					gap: 30px;
+				`}
+			>
+				<Label fontScale='h1'>Projects</Label>
+				<Label fontScale='h3'>Start a new project</Label>
+				<CreateNewScreenButton name='plus' onClick={() => dispatch(createNewProjectAction())} />
+				<Label fontScale='h4'>Existing Projects</Label>
+				<ProjectsList />
+			</Box>
+		</Box>
+	);
+};
+
+export default HomeContainer;

apps/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx

@@ -0,0 +1,35 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box } from '@rocket.chat/fuselage';
+import { useContext } from 'react';
+
+import ProjectsThumbnail from './ProjectsThumbnail';
+import { context } from '../../../Context';
+
+const ProjectsList = () => {
+	const {
+		state: { screens, projects },
+	} = useContext(context);
+
+	return (
+		<Box
+			className={css`
+				display: grid;
+				grid-template-columns: repeat(auto-fill, 200px);
+				gap: 30px;
+			`}
+			paddingBlockEnd='30px'
+		>
+			{Object.values(projects).map((project) => (
+				<ProjectsThumbnail
+					key={project.id}
+					id={project.id}
+					name={project.name}
+					date={project.date}
+					blocks={screens[project.screens[0]].payload.blocks}
+				/>
+			))}
+		</Box>
+	);
+};
+
+export default ProjectsList;

apps/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx

@@ -0,0 +1,78 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box } from '@rocket.chat/fuselage';
+import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
+import { type ChangeEvent, useContext, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { activeProjectAction, context, renameProjectAction } from '../../../Context';
+import { deleteProjectAction } from '../../../Context/action/deleteProjectAction';
+import type { ILayoutBlock } from '../../../Context/initialState';
+import routes from '../../../Routes/Routes';
+import { formatDate } from '../../../utils/formatDate';
+import RenderPayload from '../../RenderPayload/RenderPayload';
+import EditMenu from '../../ScreenThumbnail/EditMenu';
+import EditableLabel from '../../ScreenThumbnail/EditableLabel/EditableLabel';
+import ScreenThumbnailWrapper from '../../ScreenThumbnail/ScreenThumbnailWrapper';
+import Thumbnail from '../../ScreenThumbnail/Thumbnail';
+
+export type ProjectsThumbnailProps = { id: string; name: string; date: string; blocks: ILayoutBlock[] };
+
+const ProjectsThumbnail = ({ id, name: _name, date, blocks }: ProjectsThumbnailProps) => {
+	const [name, setName] = useState<string>(_name);
+	const navigate = useNavigate();
+	const { dispatch } = useContext(context);
+	const toast = useToastBarDispatch();
+	const activeProjectHandler = () => {
+		dispatch(activeProjectAction(id));
+		navigate(`/${id}/${routes.project}`);
+	};
+
+	const deleteScreenHandler = () => {
+		dispatch(deleteProjectAction(id));
+	};
+
+	const onChangeNameHandler = (e: ChangeEvent<HTMLInputElement>) => {
+		setName(e.currentTarget.value);
+	};
+
+	const nameSaveHandler = () => {
+		if (!name.trim()) {
+			setName(_name);
+			return toast({
+				type: 'error',
+				message: 'Cannot rename project to empty name.',
+			});
+		}
+		dispatch(renameProjectAction({ id, name }));
+	};
+
+	return (
+		<Box
+			display='flex'
+			flexDirection='column'
+			className={css`
+				gap: 5px;
+			`}
+			position='relative'
+		>
+			<EditMenu
+				name={name}
+				date={date}
+				onChange={onChangeNameHandler}
+				onDelete={deleteScreenHandler}
+				onBlur={nameSaveHandler}
+				labelProps={{ fontScale: 'h5' }}
+			/>
+			<ScreenThumbnailWrapper onClick={activeProjectHandler} width='200px' height='260px' padding='30px'>
+				<Thumbnail of={<RenderPayload blocks={blocks} />} />
+				<Box onClick={(e) => e.stopPropagation()}></Box>
+			</ScreenThumbnailWrapper>
+			<EditableLabel value={name} onChange={onChangeNameHandler} fontScale='h5' onBlur={nameSaveHandler} />
+			<Box withTruncatedText fontScale='p2'>
+				{formatDate(date)}
+			</Box>
+		</Box>
+	);
+};
+
+export default ProjectsThumbnail;

apps/uikit-playground/src/Components/HomeContainer/ProjectsList/index.ts

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

apps/uikit-playground/src/Components/HomeContainer/index.ts

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