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

apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFileItemWrapper.tsx

@@ -0,0 +1,35 @@
+import type { IUploadWithUser } from '@rocket.chat/core-typings';
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Palette } from '@rocket.chat/fuselage';
+import type { ComponentProps, Ref } from 'react';
+import { forwardRef } from 'react';
+
+const customClass = css`
+	&:hover {
+		cursor: pointer;
+		background: ${Palette.surface['surface-hover']};
+	}
+`;
+
+export type RoomFileItemWrapperProps = ComponentProps<typeof Box> & { item: IUploadWithUser };
+
+const RoomFileItemWrapper = forwardRef(function RoomFileItemWrapper(
+	{ item, ...props }: RoomFileItemWrapperProps,
+	ref: Ref<HTMLDivElement>,
+) {
+	return (
+		<Box
+			ref={ref}
+			role='listitem'
+			aria-label={item.name}
+			display='flex'
+			paddingBlock={12}
+			paddingInline={24}
+			borderRadius={4}
+			className={customClass}
+			{...props}
+		/>
+	);
+});
+
+export default RoomFileItemWrapper;

apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.spec.tsx

@@ -0,0 +1,23 @@
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './RoomFiles.stories';
+
+jest.mock('../../../../../client/lib/getURL', () => ({
+	getURL: jest.fn((url: string) => url),
+}));
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />);
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />);
+
+	// Disable 'nested-interactive' rule because our `Select` component is still not a11y compliant
+	const results = await axe(container, { rules: { 'nested-interactive': { enabled: false } } });
+	expect(results).toHaveNoViolations();
+});

apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.stories.tsx

@@ -0,0 +1,55 @@
+import { Contextualbar } from '@rocket.chat/ui-client';
+import type { Meta } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import RoomFiles from './RoomFiles';
+
+export default {
+	component: RoomFiles,
+	parameters: {
+		layout: 'fullscreen',
+		actions: { argTypesRegex: '^on.*' },
+	},
+	decorators: [(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>],
+	args: {
+		type: 'all',
+		text: '',
+		loadMoreItems: action('loadMoreItems'),
+		setText: action('setText'),
+		setType: action('setType'),
+	},
+} satisfies Meta<typeof RoomFiles>;
+
+const fakeItems = Array.from({ length: 10 }, (_, i) => ({
+	_id: String(i),
+	name: `File ${i}`,
+	url: '#',
+	uploadedAt: new Date(),
+	user: {
+		_id: 'rocket.cat',
+		username: 'rocket.cat',
+	},
+	_updatedAt: new Date(),
+}));
+
+export const Default = {
+	args: {
+		filesItems: fakeItems,
+		total: fakeItems.length,
+		isSuccess: true,
+	},
+};
+
+export const Loading = {
+	args: {
+		isPending: true,
+	},
+};
+
+export const Empty = {
+	args: {
+		isSuccess: true,
+		filesItems: [],
+		total: 0,
+	},
+};

apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx

@@ -0,0 +1,126 @@
+import type { IRoom, IUpload, IUploadWithUser } from '@rocket.chat/core-typings';
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { Box, Icon, TextInput, Select, Throbber } from '@rocket.chat/fuselage';
+import {
+	VirtualizedScrollbars,
+	ContextualbarHeader,
+	ContextualbarIcon,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarContent,
+	ContextualbarEmptyContent,
+	ContextualbarSection,
+	ContextualbarDialog,
+} from '@rocket.chat/ui-client';
+import type { ChangeEvent } from 'react';
+import { useId, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
+
+import RoomFileItemWrapper from './RoomFileItemWrapper';
+import RoomFilesListWrapper from './RoomFilesListWrapper';
+import FileItem from './components/FileItem';
+import ResultsLiveRegion from '../../../../components/ResultsLiveRegion';
+
+export type RoomFilesProps = {
+	rid: IRoom['_id'];
+	isPending: boolean;
+	isSuccess: boolean;
+	type: string;
+	text: string;
+	filesItems: IUploadWithUser[];
+	loadMoreItems: () => void;
+	setType: (value: any) => void;
+	setText: (e: ChangeEvent<HTMLInputElement>) => void;
+	total: number;
+	onClickClose: () => void;
+	onClickDelete: (id: IUpload['_id']) => void;
+};
+
+const RoomFiles = ({
+	rid,
+	isPending,
+	isSuccess,
+	type,
+	text,
+	filesItems = [],
+	loadMoreItems,
+	setType,
+	setText,
+	total,
+	onClickClose,
+	onClickDelete,
+}: RoomFilesProps) => {
+	const { t } = useTranslation();
+	const filesListId = useId();
+
+	const options: SelectOption[] = useMemo(
+		() => [
+			['all', t('All')],
+			['image', t('Images')],
+			['video', t('Videos')],
+			['audio', t('Audios')],
+			['text', t('Texts')],
+			['application', t('Files')],
+		],
+		[t],
+	);
+
+	return (
+		<ContextualbarDialog>
+			<ContextualbarHeader>
+				<ContextualbarIcon name='attachment' />
+				<ContextualbarTitle>{t('Files')}</ContextualbarTitle>
+				{onClickClose && <ContextualbarClose onClick={onClickClose} />}
+			</ContextualbarHeader>
+			<ContextualbarSection>
+				<TextInput
+					data-qa-files-search
+					placeholder={t('Search_Files')}
+					aria-label={t('Search_Files')}
+					aria-controls={isSuccess ? filesListId : undefined}
+					value={text}
+					onChange={setText}
+					endAddon={<Icon name='magnifier' size='x20' />}
+				/>
+				<Box width='x144' marginInlineStart={8}>
+					<Select aria-controls={isSuccess ? filesListId : undefined} onChange={setType} value={type} options={options} />
+				</Box>
+			</ContextualbarSection>
+			<ContextualbarContent paddingInline={0}>
+				<ResultsLiveRegion shouldAnnounce={isSuccess} itemCount={total} />
+				{isPending && (
+					<Box padding={24}>
+						<Throbber size='x12' />
+					</Box>
+				)}
+				{isSuccess && (
+					<Box width='full' height='full' id={filesListId} flexShrink={1} overflow='hidden'>
+						{filesItems.length === 0 && <ContextualbarEmptyContent title={t('No_files_found')} />}
+						{filesItems.length > 0 && (
+							<VirtualizedScrollbars>
+								<Virtuoso
+									style={{
+										height: '100%',
+										width: '100%',
+									}}
+									totalCount={total}
+									endReached={loadMoreItems}
+									overscan={100}
+									data={filesItems}
+									itemContent={(_, data) => <FileItem rid={rid} fileData={data} onClickDelete={onClickDelete} />}
+									components={{
+										List: RoomFilesListWrapper,
+										Item: RoomFileItemWrapper,
+									}}
+								/>
+							</VirtualizedScrollbars>
+						)}
+					</Box>
+				)}
+			</ContextualbarContent>
+		</ContextualbarDialog>
+	);
+};
+
+export default RoomFiles;

apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFilesListWrapper.tsx

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Ref } from 'react';
+import { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const RoomFilesListWrapper = forwardRef(function RoomFilesListWrapper(props: HTMLAttributes<HTMLDivElement>, ref: Ref<HTMLDivElement>) {
+	const { t } = useTranslation();
+	return <div role='list' aria-label={t('Files_list')} ref={ref} {...props} />;
+});
+
+export default RoomFilesListWrapper;

apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFilesWithData.tsx

@@ -0,0 +1,49 @@
+import { useLocalStorage, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { useRoomToolbox } from '@rocket.chat/ui-contexts';
+import type { ChangeEvent } from 'react';
+import { useState, useCallback } from 'react';
+
+import RoomFiles from './RoomFiles';
+import { useDeleteFile } from './hooks/useDeleteFile';
+import { useFilesList } from './hooks/useFilesList';
+import { useRoom } from '../../contexts/RoomContext';
+
+const RoomFilesWithData = () => {
+	const room = useRoom();
+	const { closeTab } = useRoomToolbox();
+	const [text, setText] = useState('');
+	const [type, setType] = useLocalStorage('file-list-type', 'all');
+
+	const debouncedText = useDebouncedValue(text, 400);
+
+	const { isPending, isSuccess, data, fetchNextPage, refetch } = useFilesList({
+		rid: room._id,
+		type,
+		text: debouncedText,
+	});
+
+	const handleTextChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+		setText(event.currentTarget.value);
+	}, []);
+
+	const handleDeleteFile = useDeleteFile(refetch);
+
+	return (
+		<RoomFiles
+			rid={room._id}
+			isPending={isPending}
+			isSuccess={isSuccess}
+			type={type}
+			text={text}
+			filesItems={data?.filesItems ?? []}
+			loadMoreItems={fetchNextPage}
+			setType={setType}
+			setText={handleTextChange}
+			total={data?.total ?? 0}
+			onClickClose={closeTab}
+			onClickDelete={handleDeleteFile}
+		/>
+	);
+};
+
+export default RoomFilesWithData;

apps/meteor/client/views/room/contextualBar/RoomFiles/__snapshots__/RoomFiles.spec.tsx.snap

@@ -0,0 +1,639 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-glyll0"
+    >
+      <span
+        data-focus-scope-start="true"
+        hidden=""
+      />
+      <div
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
+      >
+        <div
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-nlfrt3"
+          role="dialog"
+          tabindex="-1"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-lm07yg"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1l4fxfb"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-attachment rcx-icon rcx-css-1yal9it"
+              >
+                
+              </i>
+              <h5
+                class="rcx-box rcx-box--full rcx-css-1spko5i"
+                id="contextualbarTitle"
+              >
+                Files
+              </h5>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-16arwmq"
+          >
+            <label
+              class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+            >
+              <input
+                aria-controls="_r_0_"
+                aria-label="Search_Files"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                data-qa-files-search="true"
+                placeholder="Search_Files"
+                size="1"
+                type="text"
+                value=""
+              />
+              <span
+                class="rcx-box rcx-box--full rcx-input-box__addon"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </span>
+            </label>
+            <div
+              class="rcx-box rcx-box--full rcx-css-l1qvi5"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-1mbgoc8"
+              >
+                <div
+                  aria-hidden="true"
+                  data-a11y-ignore="aria-hidden-focus"
+                  data-react-aria-prevent-focus="true"
+                  data-testid="hidden-select-container"
+                  style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                >
+                  <label>
+                    <select
+                      tabindex="-1"
+                    >
+                      <option />
+                      <option
+                        value="all"
+                      >
+                        all
+                      </option>
+                      <option
+                        value="image"
+                      >
+                        image
+                      </option>
+                      <option
+                        value="video"
+                      >
+                        video
+                      </option>
+                      <option
+                        value="audio"
+                      >
+                        audio
+                      </option>
+                      <option
+                        value="text"
+                      >
+                        text
+                      </option>
+                      <option
+                        value="application"
+                      >
+                        application
+                      </option>
+                    </select>
+                  </label>
+                </div>
+              </div>
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="react-aria-_r_9_"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-select rcx-css-1vw6rc6"
+                type="button"
+              >
+                <span
+                  class="rcx-box rcx-box--full rcx-css-1ah8hdc"
+                  id="react-aria-_r_9_"
+                >
+                  All
+                </span>
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-l5txo2"
+                >
+                  
+                </i>
+              </button>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-10ikbhr"
+          >
+            <div
+              role="status"
+              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+            >
+              __count__result_found
+            </div>
+            <div
+              class="rcx-box rcx-box--full rcx-css-kotrsu"
+              id="_r_0_"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-1pd039f rcx-css-1cb6i7s"
+              >
+                <div
+                  data-testid="virtuoso-scroller"
+                  data-virtuoso-scroller="true"
+                  style="height: 100%; outline: none; overflow-y: auto; position: relative; width: 100%;"
+                  tabindex="-1"
+                >
+                  <div
+                    data-viewport-type="element"
+                    style="height: 100%; position: absolute; top: 0px; width: 100%;"
+                  >
+                    <div
+                      aria-label="Files_list"
+                      data-testid="virtuoso-item-list"
+                      role="list"
+                      style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-124vum9"
+            />
+          </div>
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
+      </div>
+      <span
+        data-focus-scope-end="true"
+        hidden=""
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`renders Empty without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-glyll0"
+    >
+      <span
+        data-focus-scope-start="true"
+        hidden=""
+      />
+      <div
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
+      >
+        <div
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-nlfrt3"
+          role="dialog"
+          tabindex="-1"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-lm07yg"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1l4fxfb"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-attachment rcx-icon rcx-css-1yal9it"
+              >
+                
+              </i>
+              <h5
+                class="rcx-box rcx-box--full rcx-css-1spko5i"
+                id="contextualbarTitle"
+              >
+                Files
+              </h5>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-16arwmq"
+          >
+            <label
+              class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+            >
+              <input
+                aria-controls="_r_a_"
+                aria-label="Search_Files"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                data-qa-files-search="true"
+                placeholder="Search_Files"
+                size="1"
+                type="text"
+                value=""
+              />
+              <span
+                class="rcx-box rcx-box--full rcx-input-box__addon"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </span>
+            </label>
+            <div
+              class="rcx-box rcx-box--full rcx-css-l1qvi5"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-1mbgoc8"
+              >
+                <div
+                  aria-hidden="true"
+                  data-a11y-ignore="aria-hidden-focus"
+                  data-react-aria-prevent-focus="true"
+                  data-testid="hidden-select-container"
+                  style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                >
+                  <label>
+                    <select
+                      tabindex="-1"
+                    >
+                      <option />
+                      <option
+                        value="all"
+                      >
+                        all
+                      </option>
+                      <option
+                        value="image"
+                      >
+                        image
+                      </option>
+                      <option
+                        value="video"
+                      >
+                        video
+                      </option>
+                      <option
+                        value="audio"
+                      >
+                        audio
+                      </option>
+                      <option
+                        value="text"
+                      >
+                        text
+                      </option>
+                      <option
+                        value="application"
+                      >
+                        application
+                      </option>
+                    </select>
+                  </label>
+                </div>
+              </div>
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="react-aria-_r_j_"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-select rcx-css-1vw6rc6"
+                type="button"
+              >
+                <span
+                  class="rcx-box rcx-box--full rcx-css-1ah8hdc"
+                  id="react-aria-_r_j_"
+                >
+                  All
+                </span>
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-l5txo2"
+                >
+                  
+                </i>
+              </button>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-10ikbhr"
+          >
+            <div
+              role="status"
+              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+            >
+              No_results_found
+            </div>
+            <div
+              class="rcx-box rcx-box--full rcx-css-kotrsu"
+              id="_r_a_"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-r8c38r"
+              >
+                <div
+                  class="rcx-states"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-states__icon rcx-icon--name-magnifier rcx-icon rcx-css-d884y5"
+                  >
+                    
+                  </i>
+                  <h3
+                    class="rcx-states__title"
+                  >
+                    No_files_found
+                  </h3>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-124vum9"
+            />
+          </div>
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
+      </div>
+      <span
+        data-focus-scope-end="true"
+        hidden=""
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`renders Loading without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-glyll0"
+    >
+      <span
+        data-focus-scope-start="true"
+        hidden=""
+      />
+      <div
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
+      >
+        <div
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-nlfrt3"
+          role="dialog"
+          tabindex="-1"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-lm07yg"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1l4fxfb"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-attachment rcx-icon rcx-css-1yal9it"
+              >
+                
+              </i>
+              <h5
+                class="rcx-box rcx-box--full rcx-css-1spko5i"
+                id="contextualbarTitle"
+              >
+                Files
+              </h5>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-16arwmq"
+          >
+            <label
+              class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+            >
+              <input
+                aria-label="Search_Files"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                data-qa-files-search="true"
+                placeholder="Search_Files"
+                size="1"
+                type="text"
+                value=""
+              />
+              <span
+                class="rcx-box rcx-box--full rcx-input-box__addon"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </span>
+            </label>
+            <div
+              class="rcx-box rcx-box--full rcx-css-l1qvi5"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-1mbgoc8"
+              >
+                <div
+                  aria-hidden="true"
+                  data-a11y-ignore="aria-hidden-focus"
+                  data-react-aria-prevent-focus="true"
+                  data-testid="hidden-select-container"
+                  style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                >
+                  <label>
+                    <select
+                      tabindex="-1"
+                    >
+                      <option />
+                      <option
+                        value="all"
+                      >
+                        all
+                      </option>
+                      <option
+                        value="image"
+                      >
+                        image
+                      </option>
+                      <option
+                        value="video"
+                      >
+                        video
+                      </option>
+                      <option
+                        value="audio"
+                      >
+                        audio
+                      </option>
+                      <option
+                        value="text"
+                      >
+                        text
+                      </option>
+                      <option
+                        value="application"
+                      >
+                        application
+                      </option>
+                    </select>
+                  </label>
+                </div>
+              </div>
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="react-aria-_r_t_"
+                class="rcx-box rcx-box--full rcx-box--animated rcx-select rcx-css-1vw6rc6"
+                type="button"
+              >
+                <span
+                  class="rcx-box rcx-box--full rcx-css-1ah8hdc"
+                  id="react-aria-_r_t_"
+                >
+                  All
+                </span>
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-l5txo2"
+                >
+                  
+                </i>
+              </button>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-10ikbhr"
+          >
+            <div
+              role="status"
+              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+            />
+            <div
+              class="rcx-box rcx-box--full rcx-css-m843eh"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-throbber"
+              >
+                <span
+                  class="rcx-box rcx-box--full rcx-throbber__circle rcx-css-1xtde58 rcx-css-10wc9to"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-throbber__circle rcx-css-1mkyloh rcx-css-10wc9to"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-throbber__circle rcx-css-1r9rmv6 rcx-css-10wc9to"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-124vum9"
+            />
+          </div>
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            style="position: absolute; user-select: none; width: 20px; height: 20px; z-index: 1; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
+      </div>
+      <span
+        data-focus-scope-end="true"
+        hidden=""
+      />
+    </div>
+  </div>
+</body>
+`;

apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItem.stories.tsx

@@ -0,0 +1,30 @@
+import { Contextualbar } from '@rocket.chat/ui-client';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import FileItem from './FileItem';
+
+export default {
+	component: FileItem,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	decorators: [(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>],
+} satisfies Meta<typeof FileItem>;
+
+export const Default: StoryObj<typeof FileItem> = {
+	name: 'FileItem',
+
+	args: {
+		fileData: {
+			_id: '1',
+			name: 'Lorem Ipsum Indolor Dolor',
+			url: '#',
+			uploadedAt: new Date(),
+			user: {
+				_id: 'rocket.cat',
+				username: 'rocket.cat',
+			},
+			_updatedAt: new Date(),
+		},
+	},
+};

apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItem.tsx

@@ -0,0 +1,70 @@
+import type { IRoom, IUpload, IUploadWithUser } from '@rocket.chat/core-typings';
+import { Box } from '@rocket.chat/fuselage';
+import { FilePreviewIcon } from '@rocket.chat/ui-client';
+
+import FileItemMenu from './FileItemMenu';
+import ImageItem from './ImageItem';
+import { getFileExtension } from '../../../../../../lib/utils/getFileExtension';
+import { normalizeUsername } from '../../../../../../lib/utils/normalizeUsername';
+import { useDownloadFromServiceWorker } from '../../../../../hooks/useDownloadFromServiceWorker';
+import { useFormatDateAndTime } from '../../../../../hooks/useFormatDateAndTime';
+import { isPreviewableImage } from '../../../../../lib/utils/isPreviewableImage';
+
+export type FileItemProps = {
+	rid: IRoom['_id'];
+	fileData: IUploadWithUser;
+	onClickDelete: (id: IUpload['_id']) => void;
+};
+
+const FileItem = ({ rid, fileData, onClickDelete }: FileItemProps) => {
+	const format = useFormatDateAndTime();
+	const { _id, path, name, uploadedAt, type, typeGroup, user, description } = fileData;
+
+	const encryptedAnchorProps = useDownloadFromServiceWorker(path || '', name);
+	const normalizedUsername = user?.username ? normalizeUsername(user.username) : undefined;
+	const shouldDisplayPreview = typeGroup === 'image' && !!type && isPreviewableImage(type);
+
+	return (
+		<>
+			{shouldDisplayPreview ? (
+				<ImageItem id={_id} url={path} name={name} username={normalizedUsername} timestamp={format(uploadedAt)} alt={description} />
+			) : (
+				<Box
+					is='a'
+					minWidth={0}
+					aria-label={name}
+					download
+					rel='noopener noreferrer'
+					target='_blank'
+					title={name}
+					display='flex'
+					alignItems='center'
+					flexGrow={1}
+					flexShrink={1}
+					href={path}
+					tabIndex={-1}
+					textDecorationLine='none'
+					{...(path?.includes('/file-decrypt/') ? encryptedAnchorProps : {})}
+				>
+					<FilePreviewIcon format={getFileExtension(name)} />
+					<Box marginInlineStart={8} flexShrink={1} overflow='hidden'>
+						<Box withTruncatedText color='default' fontScale='p2m'>
+							{name}
+						</Box>
+						{user?.username && (
+							<Box withTruncatedText color='hint' fontScale='p2'>
+								@{normalizedUsername}
+							</Box>
+						)}
+						<Box color='hint' fontScale='micro'>
+							{format(uploadedAt)}
+						</Box>
+					</Box>
+				</Box>
+			)}
+			<FileItemMenu rid={rid} fileData={fileData} onClickDelete={onClickDelete} />
+		</>
+	);
+};
+
+export default FileItem;

apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItemMenu.tsx

@@ -0,0 +1,93 @@
+import type { IRoom, IUpload } from '@rocket.chat/core-typings';
+import { Emitter } from '@rocket.chat/emitter';
+import { Box } from '@rocket.chat/fuselage';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useTranslation, useUserId } from '@rocket.chat/ui-contexts';
+import { memo, useEffect, useId } from 'react';
+
+import { download, downloadAs } from '../../../../../lib/download';
+import { getURL } from '../../../../../lib/getURL';
+import { useMessageDeletionIsAllowed } from '../hooks/useMessageDeletionIsAllowed';
+
+export type FileItemMenuProps = {
+	rid: IRoom['_id'];
+	fileData: IUpload;
+	onClickDelete: (id: IUpload['_id']) => void;
+};
+
+const ee = new Emitter<Record<string, { result: ArrayBuffer; id: string }>>();
+
+if ('serviceWorker' in navigator) {
+	navigator.serviceWorker.addEventListener('message', (event) => {
+		if (event.data.type === 'attachment-download-result') {
+			const { result } = event.data as { result: ArrayBuffer; id: string };
+
+			ee.emit(event.data.id, { result, id: event.data.id });
+		}
+	});
+}
+
+const FileItemMenu = ({ rid, fileData, onClickDelete }: FileItemMenuProps) => {
+	const t = useTranslation();
+	const userId = useUserId();
+	const isDeletionAllowed = useMessageDeletionIsAllowed(rid, fileData, userId);
+	const canDownloadFile = !fileData.encryption || 'serviceWorker' in navigator;
+
+	const { controller } = navigator?.serviceWorker || {};
+
+	const uid = useId();
+
+	useEffect(
+		() =>
+			ee.once(uid, ({ result }) => {
+				downloadAs({ data: [new Blob([result])] }, fileData.name ?? t('Download'));
+			}),
+		[fileData, t, uid],
+	);
+
+	const menuOptions = [
+		{
+			id: 'download',
+			content: t('Download'),
+			icon: 'download',
+			onClick: () => {
+				if (fileData.path?.includes('/file-decrypt/')) {
+					if (!controller) {
+						return;
+					}
+
+					controller?.postMessage({
+						type: 'attachment-download',
+						url: fileData.path,
+						id: uid,
+					});
+					return;
+				}
+
+				if (fileData.url && fileData.name) {
+					const URL = window.webkitURL ?? window.URL;
+					const href = getURL(fileData.url);
+					download(href, fileData.name);
+					URL.revokeObjectURL(fileData.url);
+				}
+			},
+			disabled: !canDownloadFile,
+		},
+		...(isDeletionAllowed && onClickDelete
+			? [
+					{
+						id: 'delete',
+						content: <Box color='status-font-on-danger'>{t('Delete')}</Box>,
+						onClick: () => onClickDelete(fileData._id),
+						icon: 'trash',
+						iconColor: 'status-font-on-danger',
+					},
+				]
+			: []),
+	] as GenericMenuItemProps[];
+
+	return <GenericMenu title={t('More')} aria-label={t('More')} items={menuOptions} placement='bottom-end' />;
+};
+
+export default memo(FileItemMenu);

apps/meteor/client/views/room/contextualBar/RoomFiles/components/ImageItem.tsx

@@ -0,0 +1,48 @@
+import { Avatar, Box } from '@rocket.chat/fuselage';
+
+export type ImageItemProps = {
+	id: string;
+	url: string | undefined;
+	name: string | undefined;
+	timestamp: string;
+	username?: string;
+	alt?: string;
+};
+
+const ImageItem = ({ id, url, name, timestamp, username, alt = '' }: ImageItemProps) => {
+	return (
+		<Box
+			minWidth={0}
+			data-id={id}
+			className='gallery-item-container'
+			title={name}
+			display='flex'
+			alignItems='center'
+			flexGrow={1}
+			flexShrink={1}
+		>
+			{url && (
+				<Box minWidth='x48'>
+					<Avatar objectFit='cover' size='x48' url={url} className='gallery-item' alt={alt} />
+				</Box>
+			)}
+			<Box marginInlineStart={8} flexShrink={1} overflow='hidden' className='gallery-item' cursor='default'>
+				{name && (
+					<Box withTruncatedText color='default' fontScale='p2m' className='gallery-item'>
+						{name}
+					</Box>
+				)}
+				{username && (
+					<Box withTruncatedText color='hint' fontScale='p2' className='gallery-item'>
+						@{username}
+					</Box>
+				)}
+				<Box color='hint' fontScale='micro' className='gallery-item'>
+					{timestamp}
+				</Box>
+			</Box>
+		</Box>
+	);
+};
+
+export default ImageItem;

apps/meteor/client/views/room/contextualBar/RoomFiles/hooks/useDeleteFile.tsx

@@ -0,0 +1,34 @@
+import type { IUpload } from '@rocket.chat/core-typings';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useSetModal, useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+export const useDeleteFile = (reload: () => void) => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const deleteMessage = useEndpoint('POST', '/v1/chat.delete');
+
+	const handleDelete = useStableCallback((_id: IUpload['_id']) => {
+		const onConfirm = async () => {
+			try {
+				await deleteMessage({ fileId: _id });
+				dispatchToastMessage({ type: 'success', message: t('Deleted') });
+				reload();
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal(null);
+			}
+		};
+
+		setModal(
+			<GenericModal variant='danger' onConfirm={onConfirm} onCancel={() => setModal(null)} confirmText={t('Delete')}>
+				{t('Delete_File_Warning')}
+			</GenericModal>,
+		);
+	});
+
+	return handleDelete;
+};

apps/meteor/client/views/room/contextualBar/RoomFiles/hooks/useFilesList.ts

@@ -0,0 +1,82 @@
+import { Base64 } from '@rocket.chat/base64';
+import type { IUpload } from '@rocket.chat/core-typings';
+import { useUserRoom, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { e2e } from '../../../../../lib/e2ee/rocketchat.e2e';
+import { roomsQueryKeys } from '../../../../../lib/queryKeys';
+import { getConfig } from '../../../../../lib/utils/getConfig';
+
+export const useFilesList = ({ rid, type, text }: { rid: Required<IUpload>['rid']; type: string; text: string }) => {
+	const room = useUserRoom(rid);
+
+	const roomTypes = {
+		c: '/v1/channels.files',
+		l: '/v1/channels.files',
+		v: '/v1/channels.files',
+		d: '/v1/im.files',
+		p: '/v1/groups.files',
+	} as const;
+
+	const getFiles = useEndpoint('GET', roomTypes[room?.t ?? 'c']);
+
+	const count = parseInt(`${getConfig('discussionListSize', 10)}`, 10);
+
+	return useInfiniteQuery({
+		queryKey: roomsQueryKeys.files(rid, { type, text }),
+		queryFn: async ({ pageParam: offset }) => {
+			const { files, total } = await getFiles({
+				roomId: rid,
+				offset,
+				count,
+				sort: JSON.stringify({ uploadedAt: -1 }),
+				...(text ? { name: text } : {}),
+				...(type !== 'all' && {
+					typeGroup: type,
+				}),
+				onlyConfirmed: true,
+			});
+
+			const items = files.map((file) => ({
+				...file,
+				uploadedAt: file.uploadedAt ? new Date(file.uploadedAt) : undefined,
+				modifiedAt: file.modifiedAt ? new Date(file.modifiedAt) : undefined,
+				expiresAt: file.expiresAt ? new Date(file.expiresAt) : undefined,
+				_updatedAt: new Date(file._updatedAt),
+			}));
+
+			for await (const file of items) {
+				if (file.rid && file.content) {
+					const e2eRoom = await e2e.getInstanceByRoomId(file.rid);
+					if (e2eRoom?.shouldConvertReceivedMessages()) {
+						const decrypted = await e2e.decryptFileContent(file);
+						const key = Base64.encode(
+							JSON.stringify({
+								...decrypted.encryption,
+								name: String.fromCharCode(...new TextEncoder().encode(decrypted.name)),
+								type: decrypted.type,
+							}),
+						);
+						decrypted.path = `/file-decrypt${decrypted.path}?key=${encodeURIComponent(key)}`;
+						Object.assign(file, decrypted);
+					}
+				}
+			}
+
+			return {
+				items,
+				itemCount: total,
+			};
+		},
+		initialPageParam: 0,
+		getNextPageParam: (lastPage, _, lastOffset) => {
+			const nextOffset = lastOffset + count;
+			if (nextOffset >= lastPage.itemCount) return undefined;
+			return nextOffset;
+		},
+		select: ({ pages }) => ({
+			filesItems: pages.flatMap((page) => page.items),
+			total: pages.at(-1)?.itemCount,
+		}),
+	});
+};

apps/meteor/client/views/room/contextualBar/RoomFiles/hooks/useMessageDeletionIsAllowed.ts

@@ -0,0 +1,60 @@
+import type { IRoom, IUser, IUpload } from '@rocket.chat/core-typings';
+import { useSetting, usePermission } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+
+import { getDifference, MINUTES } from '../lib/getDifference';
+
+export const useMessageDeletionIsAllowed = (rid: IRoom['_id'], file: IUpload, uid: IUser['_id'] | undefined) => {
+	const canForceDelete = usePermission('force-delete-message', rid);
+	const deletionIsEnabled = useSetting('Message_AllowDeleting');
+	const userHasPermissionToDeleteAny = usePermission('delete-message', rid);
+	const userHasPermissionToDeleteOwn = usePermission('delete-own-message');
+	const bypassBlockTimeLimit = usePermission('bypass-time-limit-edit-and-delete', rid);
+	const blockDeleteInMinutes = useSetting('Message_AllowDeleting_BlockDeleteInMinutes', 0);
+
+	const isDeletionAllowed = useMemo(() => {
+		if (canForceDelete) {
+			return true;
+		}
+
+		if (!deletionIsEnabled) {
+			return false;
+		}
+
+		if (!userHasPermissionToDeleteAny && !userHasPermissionToDeleteOwn) {
+			return false;
+		}
+
+		const checkTimeframe = (file: IUpload) => {
+			if (!bypassBlockTimeLimit && blockDeleteInMinutes !== 0) {
+				if (!file.uploadedAt || !blockDeleteInMinutes) {
+					return false;
+				}
+
+				const currentTsDiff = getDifference(new Date(), new Date(file.uploadedAt), MINUTES);
+				return currentTsDiff < blockDeleteInMinutes;
+			}
+
+			return true;
+		};
+
+		const isUserOwnFile = (file: IUpload) => file.userId === uid;
+
+		if (userHasPermissionToDeleteAny || isUserOwnFile(file)) {
+			return checkTimeframe(file);
+		}
+
+		return false;
+	}, [
+		canForceDelete,
+		deletionIsEnabled,
+		userHasPermissionToDeleteAny,
+		userHasPermissionToDeleteOwn,
+		blockDeleteInMinutes,
+		bypassBlockTimeLimit,
+		file,
+		uid,
+	]);
+
+	return isDeletionAllowed;
+};

apps/meteor/client/views/room/contextualBar/RoomFiles/index.ts

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

apps/meteor/client/views/room/contextualBar/RoomFiles/lib/getDifference.ts

@@ -0,0 +1,6 @@
+export const MINUTES = 1000 * 60;
+
+export const getDifference = (now: Date, ts: Date, scale = MINUTES) => {
+	const diff = now.getTime() - ts.getTime() / scale;
+	return diff;
+};