Make shared components aware of layout and density settings (#33368)

* Add shared event presentation context * Add app-web event presentation mapper * Wire event presentation provider into app timelines * Add Storybook controls for event layout and density * Wire compact density through app/web event presentation provider * Use event presentation density for URL previews * Move TileErrorView layout to event presentation context * Minor fix and updated snapshot * Updated snapshots for url preview group * Prettier fix * Restore removed story to fix missing playwright test * Updates after review comments * Fix prettier issue
2026-05-06 05:30:46 +00:00
parent 7e26c2d144
commit 1f71a3a3fe
23 changed files with 379 additions and 209 deletions
@@ -0,0 +1,57 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { act, render, screen, waitFor } from "jest-matrix-react";
+import { useEventPresentation } from "@element-hq/web-shared-components";
+
+import { Layout } from "../../../src/settings/enums/Layout";
+import {
+    EventPresentationContextProvider,
+    getEventPresentation,
+} from "../../../src/utils/EventPresentationContextProvider";
+import SettingsStore from "../../../src/settings/SettingsStore";
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+
+const PresentationProbe: React.FC = () => {
+    const { layout, density } = useEventPresentation();
+
+    return <div data-testid="presentation">{`${layout}:${density}`}</div>;
+};
+
+describe("EventPresentationContextProvider", () => {
+    beforeEach(async () => {
+        await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, false);
+    });
+
+    it.each([
+        [Layout.Group, false, { layout: "group", density: "default" }],
+        [Layout.Group, true, { layout: "group", density: "compact" }],
+        [Layout.Bubble, false, { layout: "bubble", density: "default" }],
+        [Layout.Bubble, true, { layout: "bubble", density: "default" }],
+        [Layout.IRC, false, { layout: "irc", density: "default" }],
+        [Layout.IRC, true, { layout: "irc", density: "default" }],
+    ])("maps %s with compact=%s", (layout, useCompactLayout, expected) => {
+        expect(getEventPresentation(layout, useCompactLayout)).toEqual(expected);
+    });
+
+    it("updates provider density when compact layout changes", async () => {
+        render(
+            <EventPresentationContextProvider layout={Layout.Group}>
+                <PresentationProbe />
+            </EventPresentationContextProvider>,
+        );
+
+        expect(screen.getByTestId("presentation")).toHaveTextContent("group:default");
+
+        await act(async () => {
+            await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, true);
+        });
+
+        await waitFor(() => expect(screen.getByTestId("presentation")).toHaveTextContent("group:compact"));
+    });
+});