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

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerGrid/WebdavFilePickerGrid.tsx

@@ -0,0 +1,49 @@
+import type { IWebdavNode } from '@rocket.chat/core-typings';
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Icon, Skeleton, Palette } from '@rocket.chat/fuselage';
+
+import WebdavFilePickerGridItem from './WebdavFilePickerGridItem';
+import GenericNoResults from '../../../../../components/GenericNoResults';
+import { getNodeIconType } from '../lib/getNodeIconType';
+
+export type WebdavFilePickerGridProps = {
+	webdavNodes: IWebdavNode[];
+	onNodeClick: (file: IWebdavNode) => void;
+	isLoading: boolean;
+};
+
+const WebdavFilePickerGrid = ({ webdavNodes, onNodeClick, isLoading }: WebdavFilePickerGridProps) => {
+	const hoverStyle = css`
+		&:hover {
+			background-color: ${Palette.surface['surface-neutral']};
+			cursor: pointer;
+		}
+	`;
+
+	return (
+		<Box display='flex' flexWrap='wrap'>
+			{isLoading &&
+				Array(6)
+					.fill('')
+					.map((_, index) => (
+						<WebdavFilePickerGridItem padding={4} key={index}>
+							<Skeleton variant='rect' width='full' height='full' />
+						</WebdavFilePickerGridItem>
+					))}
+			{!isLoading &&
+				webdavNodes.map((webdavNode, index) => {
+					const { icon } = getNodeIconType(webdavNode.basename, webdavNode.type, webdavNode.mime);
+
+					return (
+						<WebdavFilePickerGridItem key={index} className={hoverStyle} onClick={(): void => onNodeClick(webdavNode)}>
+							<Icon marginInlineEnd={4} size='x72' name={icon} />
+							<Box textAlign='center'>{webdavNode.basename}</Box>
+						</WebdavFilePickerGridItem>
+					);
+				})}
+			{!isLoading && webdavNodes?.length === 0 && <GenericNoResults />}
+		</Box>
+	);
+};
+
+export default WebdavFilePickerGrid;

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerGrid/WebdavFilePickerGridItem.tsx

@@ -0,0 +1,16 @@
+import { Box } from '@rocket.chat/fuselage';
+
+const WebdavFilePickerGridItem = ({ ...props }) => (
+	<Box
+		borderRadius='x4'
+		width='33.33%'
+		display='flex'
+		flexDirection='column'
+		alignItems='center'
+		justifyContent='center'
+		minHeight='130px'
+		{...props}
+	/>
+);
+
+export default WebdavFilePickerGridItem;

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerGrid/index.ts

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