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/src/viewmodels/message-body/TileErrorViewModel.ts

@@ -9,7 +9,6 @@ import { type MouseEventHandler } from "react";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import {
     BaseViewModel,
-    type TileErrorViewLayout,
     type TileErrorViewSnapshot as TileErrorViewSnapshotInterface,
     type TileErrorViewModel as TileErrorViewModelInterface,
 } from "@element-hq/web-shared-components";
@@ -24,10 +23,6 @@ import BugReportDialog from "../../components/views/dialogs/BugReportDialog";
 const TILE_ERROR_BUG_REPORT_LABEL = "react-tile-soft-crash";
 
 export interface TileErrorViewModelProps {
-    /**
-     * Layout variant used by the host timeline.
-     */
-    layout: TileErrorViewLayout;
     /**
      * Event whose tile failed to render.
      */
@@ -64,17 +59,15 @@ function getViewSourceCtaLabel(developerMode: boolean): string | undefined {
 /**
  * ViewModel for the tile error fallback, providing the snapshot shown when a tile fails to render.
  *
- * The snapshot includes the host timeline layout, the fallback message, the event type,
- * and optional bug-report and view-source action labels. The view model also exposes
- * click handlers for those actions, opening the bug-report or view-source dialog when
- * available.
+ * The snapshot includes the fallback message, event type, and optional bug-report and
+ * view-source action labels. The view model also exposes click handlers for those
+ * actions, opening the bug-report or view-source dialog when available.
  */
 export class TileErrorViewModel
     extends BaseViewModel<TileErrorViewSnapshotInterface, TileErrorViewModelProps>
     implements TileErrorViewModelInterface
 {
     private static readonly computeSnapshot = (props: TileErrorViewModelProps): TileErrorViewSnapshotInterface => ({
-        layout: props.layout,
         message: _t("timeline|error_rendering_message"),
         eventType: props.mxEvent.getType(),
         bugReportCtaLabel: getBugReportCtaLabel(),
@@ -85,11 +78,6 @@ export class TileErrorViewModel
         super(props, TileErrorViewModel.computeSnapshot(props));
     }
 
-    public setLayout(layout: TileErrorViewLayout): void {
-        this.props.layout = layout;
-        this.snapshot.merge({ layout });
-    }
-
     public setError(error: Error): void {
         this.props.error = error;
     }

apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts

@@ -20,7 +20,6 @@ import { isPermalinkHost } from "../../utils/permalinks/Permalinks";
 import { mediaFromMxc } from "../../customisations/Media";
 import PlatformPeg from "../../PlatformPeg";
 import { thumbHeight } from "../../ImageUtils";
-import SettingsStore from "../../settings/SettingsStore";
 import { PosthogAnalytics } from "../../PosthogAnalytics";
 
 const logger = rootLogger.getChild("UrlPreviewGroupViewModel");
@@ -239,7 +238,6 @@ export class UrlPreviewGroupViewModel
     private readonly client: MatrixClient;
     private readonly storageKey: string;
     private readonly eventSendTime: number;
-    private readonly useCompactLayoutSettingWatcher: string;
 
     /**
      * Should the URL preview render according to the application.
@@ -282,7 +280,6 @@ export class UrlPreviewGroupViewModel
             totalPreviewCount: 0,
             previewsLimited: true,
             overPreviewLimit: false,
-            compactLayout: SettingsStore.getValue("useCompactLayout"),
         });
         this.urlPreviewEnabledByUser = globalThis.localStorage.getItem(storageKey) !== "1";
         this.urlPreviewVisible = props.visible;
@@ -291,15 +288,6 @@ export class UrlPreviewGroupViewModel
         this.client = props.client;
         this.eventSendTime = props.mxEvent.getTs();
         this.onImageClick = props.onImageClicked;
-        this.useCompactLayoutSettingWatcher = SettingsStore.watchSetting(
-            "useCompactLayout",
-            null,
-            (_setting, _roomid, _level, compactLayout) => {
-                this.snapshot.merge({
-                    compactLayout: !!compactLayout,
-                });
-            },
-        );
     }
 
     /**
@@ -383,11 +371,6 @@ export class UrlPreviewGroupViewModel
         return result;
     }
 
-    public dispose(): void {
-        super.dispose();
-        SettingsStore.unwatchSetting(this.useCompactLayoutSettingWatcher);
-    }
-
     private get visibility(): PreviewVisibility {
         if (!this.urlPreviewVisible) {
             return PreviewVisibility.Hidden;