Call Tile - Render a tile showing that a call was started (#32988)

* Ignore specific directories

Otherwise newly generated screenshots will be ignored.

* Create a CallStartedTileView

This view will render a tile that shows when an EC call was started in
the timeline.

* Add storybook tests

* Add vite tests

* Export the view from shared-components package

* Add a viewmodel for driving the view

* Support rendering the tile in the tile factory

* Fix tile rendering

* Add comment to explain css height

* Use semantic token for gap

* Update snapshot

* Use min-height over height

This will scale the element if the user sets a custom font size.

* Don't show timestamp for call started tile

Timestamp is already shown as a part of the tile content.

* Fix broken tile on bubble layout

The tile should be full-width and not shown within a bubble.

* Fix tests

* Update storybook title

apps/web/src/components/views/rooms/EventTile.tsx

@@ -717,6 +717,9 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
         if (this.props.isRedacted) return false;
 
+        // This event is a room mention but we don't want the call tile to have a highlight.
+        if (this.props.mxEvent.getType() === EventType.RTCNotification) return false;
+
         const cli = MatrixClientPeg.safeGet();
         const actions = cli.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
         // get the actions for the previous version of the event too if it is an edit
@@ -1119,7 +1122,8 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         } else if (
             (this.props.continuation && this.context.timelineRenderingType !== TimelineRenderingType.File) ||
             eventType === EventType.CallInvite ||
-            ElementCallEventType.matches(eventType)
+            ElementCallEventType.matches(eventType) ||
+            eventType === EventType.RTCNotification
         ) {
             // no avatar or sender profile for continuation messages and call tiles
             avatarSize = null;
@@ -1197,6 +1201,9 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
         const showTimestamp =
             this.props.mxEvent.getTs() &&
+            // Don't show timestamp for the CallStarted tile because
+            // the tile content already renders a timestamp.
+            this.props.mxEvent.getType() !== EventType.RTCNotification &&
             !this.props.hideTimestamp &&
             (this.props.alwaysShowTimestamps ||
                 this.props.last ||