More 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

@@ -10,7 +10,7 @@ import { type ReactNode } from "react";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { type WrappedEvent } from "../MessagePanel";
-import type MessagePanel from "../MessagePanel";
+import type { GrouperPanel } from "../MessagePanel-functional";
 
 /* Grouper classes determine when events can be grouped together in a summary.
  * Groupers should have the following methods:
@@ -24,7 +24,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: GrouperPanel, _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 +32,14 @@ export abstract class BaseGrouper {
     public readMarker: ReactNode;
 
     public constructor(
-        public readonly panel: MessagePanel,
+        public readonly panel: GrouperPanel,
         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

@@ -12,25 +12,26 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 
 import { BaseGrouper } from "./BaseGrouper";
 import { type WrappedEvent } from "../MessagePanel";
-import type MessagePanel from "../MessagePanel";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { _t } from "../../../languageHandler";
 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 { GrouperPanel } 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: GrouperPanel, { 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 +138,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.layout}
             >
                 {eventTiles}
             </GenericEventListSummary>,

src/components/structures/grouper/MainGrouper.tsx

@@ -9,7 +9,6 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ReactNode } from "react";
 import { EventType, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 
-import type MessagePanel from "../MessagePanel";
 import type { WrappedEvent } from "../MessagePanel";
 import { BaseGrouper } from "./BaseGrouper";
 import { hasText } from "../../../TextForEvent";
@@ -18,6 +17,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 { GrouperPanel } from "../MessagePanel-functional";
 
 const groupedStateEvents = [
     EventType.RoomMember,
@@ -28,7 +28,7 @@ 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: GrouperPanel, { event: ev, shouldShow }: WrappedEvent): boolean {
         if (!shouldShow) return false;
 
         if (ev.isState() && groupedStateEvents.includes(ev.getType() as EventType)) {
@@ -47,7 +47,7 @@ export class MainGrouper extends BaseGrouper {
     };
 
     public constructor(
-        public readonly panel: MessagePanel,
+        public readonly panel: GrouperPanel,
         public readonly firstEventAndShouldShow: WrappedEvent,
         public readonly prevEvent: MatrixEvent | null,
         public readonly lastShownEvent: MatrixEvent | undefined,
@@ -141,7 +141,7 @@ export class MainGrouper extends BaseGrouper {
         let highlightInSummary = false;
         let eventTiles: ReactNode[] | null = this.events
             .map((e, i) => {
-                if (e.event.getId() === panel.props.highlightedEventId) {
+                if (e.event.getId() === panel.highlightedEventId) {
                     highlightInSummary = true;
                 }
                 return panel.getTilesForEvent(
@@ -161,7 +161,7 @@ export class MainGrouper extends BaseGrouper {
 
         // If a membership event is the start of visible history, tell the user
         // why they can't see earlier messages
-        if (!this.panel.props.canBackPaginate && !this.prevEvent) {
+        if (!this.panel.canBackPaginate && !this.prevEvent) {
             ret.push(<HistoryTile key="historytile" />);
         }
 
@@ -172,7 +172,7 @@ export class MainGrouper extends BaseGrouper {
                 events={this.events.map((e) => e.event)}
                 onToggle={panel.onHeightChanged} // Update scroll state
                 startExpanded={highlightInSummary}
-                layout={this.panel.props.layout}
+                layout={this.panel.layout}
             >
                 {eventTiles}
             </EventListSummary>,