WIP

src/components/structures/TimelinePanel.tsx

@@ -44,7 +44,7 @@ import dis from "../../dispatcher/dispatcher";
 import { Action } from "../../dispatcher/actions";
 import Timer from "../../utils/Timer";
 import shouldHideEvent from "../../shouldHideEvent";
-import MessagePanel from "./MessagePanel";
+// import MessagePanel from "./MessagePanel";
 import { type IScrollState } from "./ScrollPanel";
 import { type ActionPayload } from "../../dispatcher/payloads";
 import type ResizeNotifier from "../../utils/ResizeNotifier";
@@ -58,6 +58,7 @@ import { type ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload"
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { haveRendererForEvent } from "../../events/EventTileFactory";
+import { type MessagePanelMethods, MessagePanelNew } from "./MessagePanel-functional";
 
 // These pagination sizes are higher than they may possibly need be
 // once https://github.com/matrix-org/matrix-spec-proposals/pull/3874 lands
@@ -235,7 +236,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
     private lastRRSentEventId: string | null | undefined = undefined;
     private lastRMSentEventId: string | null | undefined = undefined;
 
-    private readonly messagePanel = createRef<MessagePanel>();
+    private readonly messagePanel = createRef<MessagePanelMethods>();
     private dispatcherRef?: string;
     private timelineWindow?: TimelineWindow;
     private unmounted = false;
@@ -1821,7 +1822,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
             this.state.forwardPaginating || ["PREPARED", "CATCHUP"].includes(this.state.clientSyncState!);
         const events = this.state.events;
         return (
-            <MessagePanel
+            <MessagePanelNew
                 ref={this.messagePanel}
                 room={this.props.timelineSet.room}
                 permalinkCreator={this.props.permalinkCreator}

src/components/structures/grouper/BaseGrouper.ts

@@ -11,6 +11,7 @@ import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { type WrappedEvent } from "../MessagePanel";
 import type MessagePanel from "../MessagePanel";
+import type { MessagePanelMethods } from "../MessagePanel-functional";
 
 /* Grouper classes determine when events can be grouped together in a summary.
  * Groupers should have the following methods:
@@ -24,7 +25,7 @@ import type MessagePanel from "../MessagePanel";
  *   when determining things such as whether a date separator is necessary
  */
 export abstract class BaseGrouper {
-    public static canStartGroup = (_panel: MessagePanel, _ev: WrappedEvent): boolean => true;
+    public static canStartGroup = (_panel: MessagePanel | MessagePanelMethods, _ev: WrappedEvent): boolean => true;
 
     public events: WrappedEvent[] = [];
     // events that we include in the group but then eject out and place above the group.
@@ -32,14 +33,14 @@ export abstract class BaseGrouper {
     public readMarker: ReactNode;
 
     public constructor(
-        public readonly panel: MessagePanel,
+        public readonly panel: MessagePanel | MessagePanelMethods,
         public readonly firstEventAndShouldShow: WrappedEvent,
         public readonly prevEvent: MatrixEvent | null,
         public readonly lastShownEvent: MatrixEvent | undefined,
         public readonly nextEvent: WrappedEvent | null,
         public readonly nextEventTile?: MatrixEvent | null,
     ) {
-        this.readMarker = panel.readMarkerForEvent(
+        this.readMarker = panel?.readMarkerForEvent(
             firstEventAndShouldShow.event.getId()!,
             firstEventAndShouldShow.event === lastShownEvent,
         );

src/components/structures/grouper/CreationGrouper.tsx

@@ -19,18 +19,23 @@ import DateSeparator from "../../views/messages/DateSeparator";
 import NewRoomIntro from "../../views/rooms/NewRoomIntro";
 import GenericEventListSummary from "../../views/elements/GenericEventListSummary";
 import { SeparatorKind } from "../../views/messages/TimelineSeparator";
+import type { MessagePanelMethods } from "../MessagePanel-functional";
 
 // Wrap initial room creation events into a GenericEventListSummary
 // Grouping only events sent by the same user that sent the `m.room.create` and only until
 // the first non-state event, beacon_info event or membership event which is not regarding the sender of the `m.room.create` event
 
 export class CreationGrouper extends BaseGrouper {
-    public static canStartGroup = function (_panel: MessagePanel, { event }: WrappedEvent): boolean {
+    public static canStartGroup = function (
+        _panel: MessagePanel | MessagePanelMethods,
+        { event }: WrappedEvent,
+    ): boolean {
         return event.getType() === EventType.RoomCreate;
     };
 
     public shouldGroup({ event, shouldShow }: WrappedEvent): boolean {
         const panel = this.panel;
+        if (!panel) return false;
         const createEvent = this.firstEventAndShouldShow.event;
         if (!shouldShow) {
             return true;
@@ -137,7 +142,7 @@ export class CreationGrouper extends BaseGrouper {
                 onToggle={panel.onHeightChanged} // Update scroll state
                 summaryMembers={ev.sender ? [ev.sender] : undefined}
                 summaryText={summaryText}
-                layout={this.panel.props.layout}
+                layout={(this.panel as MessagePanelMethods).layout ?? (this.panel as MessagePanel).props.layout}
             >
                 {eventTiles}
             </GenericEventListSummary>,

src/components/structures/grouper/MainGrouper.tsx

@@ -18,6 +18,7 @@ import DateSeparator from "../../views/messages/DateSeparator";
 import HistoryTile from "../../views/rooms/HistoryTile";
 import EventListSummary from "../../views/elements/EventListSummary";
 import { SeparatorKind } from "../../views/messages/TimelineSeparator";
+import type { MessagePanelMethods } from "../MessagePanel-functional";
 
 const groupedStateEvents = [
     EventType.RoomMember,
@@ -28,7 +29,10 @@ const groupedStateEvents = [
 
 // Wrap consecutive grouped events in a ListSummary
 export class MainGrouper extends BaseGrouper {
-    public static canStartGroup = function (panel: MessagePanel, { event: ev, shouldShow }: WrappedEvent): boolean {
+    public static canStartGroup = function (
+        panel: MessagePanel | MessagePanelMethods,
+        { event: ev, shouldShow }: WrappedEvent,
+    ): boolean {
         if (!shouldShow) return false;
 
         if (ev.isState() && groupedStateEvents.includes(ev.getType() as EventType)) {