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

apps/web/test/unit-tests/utils/EventPresentationContextProvider-test.tsx

@@ -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"));
+    });
+});

apps/web/test/viewmodels/message-body/TileErrorViewModel-test.tsx

@@ -33,7 +33,6 @@ describe("TileErrorViewModel", () => {
         const mxEvent = overrides.mxEvent ?? createEvent();
 
         return new TileErrorViewModel({
-            layout: "group",
             developerMode: true,
             error,
             mxEvent,
@@ -56,7 +55,6 @@ describe("TileErrorViewModel", () => {
         const vm = createVm();
 
         expect(vm.getSnapshot()).toEqual({
-            layout: "group",
             message: "Can't load this message",
             eventType: "m.room.message",
             bugReportCtaLabel: "Submit debug logs",
@@ -78,17 +76,6 @@ describe("TileErrorViewModel", () => {
         expect(vm.getSnapshot().viewSourceCtaLabel).toBeUndefined();
     });
 
-    it("updates the layout when the host timeline layout changes", () => {
-        const vm = createVm();
-        const listener = jest.fn();
-        vm.subscribe(listener);
-
-        vm.setLayout("bubble");
-
-        expect(vm.getSnapshot().layout).toBe("bubble");
-        expect(listener).toHaveBeenCalledTimes(1);
-    });
-
     it("guards setters against unchanged values", () => {
         const error = new Error("Boom");
         const mxEvent = createEvent();
@@ -98,7 +85,6 @@ describe("TileErrorViewModel", () => {
 
         vm.setDeveloperMode(true);
         vm.setError(error);
-        vm.setLayout("group");
 
         expect(listener).not.toHaveBeenCalled();
     });

apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewGroupViewModel-test.ts.snap

@@ -75,7 +75,6 @@ exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses
 
 exports[`UrlPreviewGroupViewModel should deduplicate multiple versions of the same URL 1`] = `
 {
-  "compactLayout": false,
   "overPreviewLimit": false,
   "previews": [
     {
@@ -96,7 +95,6 @@ exports[`UrlPreviewGroupViewModel should deduplicate multiple versions of the sa
 
 exports[`UrlPreviewGroupViewModel should handle being hidden and shown by the user 1`] = `
 {
-  "compactLayout": false,
   "overPreviewLimit": false,
   "previews": [],
   "previewsLimited": true,
@@ -106,7 +104,6 @@ exports[`UrlPreviewGroupViewModel should handle being hidden and shown by the us
 
 exports[`UrlPreviewGroupViewModel should handle being hidden and shown by the user 2`] = `
 {
-  "compactLayout": false,
   "overPreviewLimit": false,
   "previews": [
     {
@@ -127,7 +124,6 @@ exports[`UrlPreviewGroupViewModel should handle being hidden and shown by the us
 
 exports[`UrlPreviewGroupViewModel should hide preview when invisible 1`] = `
 {
-  "compactLayout": false,
   "overPreviewLimit": false,
   "previews": [],
   "previewsLimited": true,
@@ -137,7 +133,6 @@ exports[`UrlPreviewGroupViewModel should hide preview when invisible 1`] = `
 
 exports[`UrlPreviewGroupViewModel should ignore failed previews 1`] = `
 {
-  "compactLayout": false,
   "overPreviewLimit": false,
   "previews": [],
   "previewsLimited": true,
@@ -147,7 +142,6 @@ exports[`UrlPreviewGroupViewModel should ignore failed previews 1`] = `
 
 exports[`UrlPreviewGroupViewModel should ignore media when mediaVisible is false 1`] = `
 {
-  "compactLayout": false,
   "overPreviewLimit": false,
   "previews": [
     {
@@ -168,7 +162,6 @@ exports[`UrlPreviewGroupViewModel should ignore media when mediaVisible is false
 
 exports[`UrlPreviewGroupViewModel should preview a URL with media 1`] = `
 {
-  "compactLayout": false,
   "overPreviewLimit": false,
   "previews": [
     {
@@ -197,7 +190,6 @@ exports[`UrlPreviewGroupViewModel should preview a URL with media 1`] = `
 
 exports[`UrlPreviewGroupViewModel should preview a single valid URL 1`] = `
 {
-  "compactLayout": false,
   "overPreviewLimit": false,
   "previews": [
     {
@@ -218,7 +210,6 @@ exports[`UrlPreviewGroupViewModel should preview a single valid URL 1`] = `
 
 exports[`UrlPreviewGroupViewModel should return no previews by default 1`] = `
 {
-  "compactLayout": false,
   "overPreviewLimit": false,
   "previews": [],
   "previewsLimited": true,