Notify to resize the timeline when the pinned message banner is displayed or hidden (#28654)

src/components/structures/RoomView.tsx

@@ -2372,7 +2372,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         );
 
         const pinnedMessageBanner = (
-            <PinnedMessageBanner room={this.state.room} permalinkCreator={this.permalinkCreator} />
+            <PinnedMessageBanner
+                room={this.state.room}
+                permalinkCreator={this.permalinkCreator}
+                resizeNotifier={this.props.resizeNotifier}
+            />
         );
 
         let messageComposer;

src/components/views/rooms/PinnedMessageBanner.tsx

@@ -6,10 +6,10 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { JSX, useEffect, useState } from "react";
+import React, { JSX, useEffect, useRef, useState } from "react";
 import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
 import { Button } from "@vector-im/compound-web";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 
 import { usePinnedEvents, useSortedFetchedPinnedEvents } from "../../../hooks/usePinnedEvents";
@@ -25,6 +25,7 @@ import { Action } from "../../../dispatcher/actions";
 import MessageEvent from "../messages/MessageEvent";
 import PosthogTrackers from "../../../PosthogTrackers.ts";
 import { EventPreview } from "./EventPreview.tsx";
+import ResizeNotifier from "../../../utils/ResizeNotifier";
 
 /**
  * The props for the {@link PinnedMessageBanner} component.
@@ -38,12 +39,20 @@ interface PinnedMessageBannerProps {
      * The room where the banner is displayed
      */
     room: Room;
+    /**
+     * The resize notifier to notify the timeline to resize itself when the banner is displayed or hidden.
+     */
+    resizeNotifier: ResizeNotifier;
 }
 
 /**
  * A banner that displays the pinned messages in a room.
  */
-export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBannerProps): JSX.Element | null {
+export function PinnedMessageBanner({
+    room,
+    permalinkCreator,
+    resizeNotifier,
+}: PinnedMessageBannerProps): JSX.Element | null {
     const pinnedEventIds = usePinnedEvents(room);
     const pinnedEvents = useSortedFetchedPinnedEvents(room, pinnedEventIds);
     const eventCount = pinnedEvents.length;
@@ -56,6 +65,8 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
     }, [eventCount]);
 
     const pinnedEvent = pinnedEvents[currentEventIndex];
+    useNotifyTimeline(pinnedEvent, resizeNotifier);
+
     if (!pinnedEvent) return null;
 
     const shouldUseMessageEvent = pinnedEvent.isRedacted() || pinnedEvent.isDecryptionFailure();
@@ -128,6 +139,23 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
     );
 }
 
+/**
+ * When the banner is displayed or hidden, we want to notify the timeline to resize itself.
+ * @param pinnedEvent
+ * @param resizeNotifier
+ */
+function useNotifyTimeline(pinnedEvent: MatrixEvent | null, resizeNotifier: ResizeNotifier): void {
+    const previousEvent = useRef<MatrixEvent | null>(null);
+    useEffect(() => {
+        // If we switch from a pinned message to no pinned message or the opposite, we want to resize the timeline
+        if ((previousEvent.current && !pinnedEvent) || (!previousEvent.current && pinnedEvent)) {
+            resizeNotifier.notifyTimelineHeightChanged();
+        }
+
+        previousEvent.current = pinnedEvent;
+    }, [pinnedEvent, resizeNotifier]);
+}
+
 const MAX_INDICATORS = 3;
 
 /**