History based navigation with new right panel store (#7398)

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>

src/components/views/rooms/EventTile.tsx

@@ -61,7 +61,7 @@ import ReactionsRow from '../messages/ReactionsRow';
 import { getEventDisplayInfo } from '../../../utils/EventUtils';
 import SettingsStore from "../../../settings/SettingsStore";
 import MKeyVerificationConclusion from "../messages/MKeyVerificationConclusion";
-import { dispatchShowThreadEvent } from '../../../dispatcher/dispatch-actions/threads';
+import { showThread } from '../../../dispatcher/dispatch-actions/threads';
 import { MessagePreviewStore } from '../../../stores/room-list/MessagePreviewStore';
 import { TimelineRenderingType } from "../../../contexts/RoomContext";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
@@ -72,6 +72,7 @@ import { ThreadNotificationState } from '../../../stores/notifications/ThreadNot
 import { RoomNotificationStateStore } from '../../../stores/notifications/RoomNotificationStateStore';
 import { NotificationStateEvents } from '../../../stores/notifications/NotificationState';
 import { NotificationColor } from '../../../stores/notifications/NotificationColor';
+import { CardContext } from '../right_panel/BaseCard';
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -670,21 +671,23 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
 
         return (
-            <div
-                className="mx_ThreadInfo"
-                onClick={() => {
-                    dispatchShowThreadEvent(
-                        this.props.mxEvent,
-                    );
-                }}
-            >
-                <span className="mx_ThreadInfo_threads-amount">
-                    { _t("%(count)s reply", {
-                        count: this.thread.length,
-                    }) }
-                </span>
-                { this.renderThreadLastMessagePreview() }
-            </div>
+            <CardContext.Consumer>
+                { context =>
+                    <div
+                        className="mx_ThreadInfo"
+                        onClick={() => {
+                            showThread({ rootEvent: this.props.mxEvent, push: context.isCard });
+                        }}
+                    >
+                        <span className="mx_ThreadInfo_threads-amount">
+                            { _t("%(count)s reply", {
+                                count: this.thread.length,
+                            }) }
+                        </span>
+                        { this.renderThreadLastMessagePreview() }
+                    </div>
+                }
+            </CardContext.Consumer>
         );
     }
 
@@ -1411,7 +1414,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         "data-notification": this.state.threadNotification,
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),
-                        "onClick": () => dispatchShowThreadEvent(this.props.mxEvent),
+                        "onClick": () => showThread({ rootEvent: this.props.mxEvent, push: true }),
                     }, <>
                         { sender }
                         { avatar }
@@ -1430,7 +1433,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             <RovingAccessibleTooltipButton
                                 className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
                                 title={_t("Reply in thread")}
-                                onClick={() => dispatchShowThreadEvent(this.props.mxEvent)}
+                                onClick={() => showThread({ rootEvent: this.props.mxEvent, push: true })}
                                 key="thread"
                             />
                             <RovingThreadListContextMenu

src/components/views/rooms/MemberList.tsx

@@ -33,7 +33,6 @@ import { isValid3pidInvite } from "../../../RoomInvite";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import BaseCard from "../right_panel/BaseCard";
-import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
 import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
@@ -513,7 +512,6 @@ export default class MemberList extends React.Component<IProps, IState> {
             return <BaseCard
                 className="mx_MemberList"
                 onClose={this.props.onClose}
-                previousPhase={RightPanelPhases.RoomSummary}
             >
                 <Spinner />
             </BaseCard>;
@@ -567,11 +565,8 @@ export default class MemberList extends React.Component<IProps, IState> {
             />
         );
 
-        let previousPhase = RightPanelPhases.RoomSummary;
-        // We have no previousPhase for when viewing a MemberList from a Space
         let scopeHeader;
         if (SpaceStore.spacesEnabled && room?.isSpaceRoom()) {
-            previousPhase = undefined;
             scopeHeader = <div className="mx_RightPanel_scopeHeader">
                 <RoomAvatar room={room} height={32} width={32} />
                 <RoomName room={room} />
@@ -586,7 +581,6 @@ export default class MemberList extends React.Component<IProps, IState> {
             </React.Fragment>}
             footer={footer}
             onClose={this.props.onClose}
-            previousPhase={previousPhase}
         >
             <div className="mx_MemberList_wrapper">
                 <TruncatedList

src/components/views/rooms/MemberTile.tsx

@@ -199,6 +199,7 @@ export default class MemberTile extends React.Component<IProps, IState> {
         dis.dispatch({
             action: Action.ViewUser,
             member: this.props.member,
+            push: true,
         });
     };