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

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
2022-01-05 17:25:41 +01:00 · 2022-01-05 17:25:41 +01:00 · 4ab3470184
commit 4ab3470184
parent 6f89267a31
25 changed files with 248 additions and 252 deletions
--- a/src/components/structures/FilePanel.tsx
+++ b/src/components/structures/FilePanel.tsx
@ -27,7 +27,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixClientPeg } from '../../MatrixClientPeg';
 import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';
-import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
 import DesktopBuildsNotice, { WarningKind } from "../views/elements/DesktopBuildsNotice";
 import BaseCard from "../views/right_panel/BaseCard";
 import { replaceableComponent } from "../../utils/replaceableComponent";
@ -221,7 +220,6 @@ class FilePanel extends React.Component<IProps, IState> {
            return <BaseCard
                className="mx_FilePanel mx_RoomView_messageListWrapper"
                onClose={this.props.onClose}
-                previousPhase={RightPanelPhases.RoomSummary}
            >
                <div className="mx_RoomView_empty">
                    { _t("You must <a>register</a> to use this functionality",
@ -234,7 +232,6 @@ class FilePanel extends React.Component<IProps, IState> {
            return <BaseCard
                className="mx_FilePanel mx_RoomView_messageListWrapper"
                onClose={this.props.onClose}
-                previousPhase={RightPanelPhases.RoomSummary}
            >
                <div className="mx_RoomView_empty">{ _t("You must join the room to see its files") }</div>
            </BaseCard>;
@ -258,7 +255,6 @@ class FilePanel extends React.Component<IProps, IState> {
                    <BaseCard
                        className="mx_FilePanel"
                        onClose={this.props.onClose}
-                        previousPhase={RightPanelPhases.RoomSummary}
                        withoutScrollContainer
                    >
                        <DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
@ -285,7 +281,6 @@ class FilePanel extends React.Component<IProps, IState> {
                    <BaseCard
                        className="mx_FilePanel"
                        onClose={this.props.onClose}
-                        previousPhase={RightPanelPhases.RoomSummary}
                    >
                        <Spinner />
                    </BaseCard>
--- a/src/components/structures/RightPanel.tsx
+++ b/src/components/structures/RightPanel.tsx
@ -27,12 +27,10 @@ import GroupStore from '../../stores/GroupStore';
 import { RightPanelPhases } from '../../stores/right-panel/RightPanelStorePhases';
 import RightPanelStore from "../../stores/right-panel/RightPanelStore";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
-import { Action } from "../../dispatcher/actions";
 import RoomSummaryCard from "../views/right_panel/RoomSummaryCard";
 import WidgetCard from "../views/right_panel/WidgetCard";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import SettingsStore from "../../settings/SettingsStore";
-import { ActionPayload } from "../../dispatcher/payloads";
 import MemberList from "../views/rooms/MemberList";
 import GroupMemberList from "../views/groups/GroupMemberList";
 import GroupRoomList from "../views/groups/GroupRoomList";
@ -47,7 +45,6 @@ import ResizeNotifier from "../../utils/ResizeNotifier";
 import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
 import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
 import { E2EStatus } from '../../utils/ShieldUtils';
-import { dispatchShowThreadsPanelEvent } from '../../dispatcher/dispatch-actions/threads';
 import TimelineCard from '../views/right_panel/TimelineCard';
 import { UPDATE_EVENT } from '../../stores/AsyncStore';
 import { IRightPanelCard, IRightPanelCardState } from '../../stores/right-panel/RightPanelStoreIPanelState';
@ -72,8 +69,6 @@ interface IState {
 export default class RightPanel extends React.Component<IProps, IState> {
    static contextType = MatrixClientContext;

-    private dispatcherRef: string;
-
    constructor(props, context) {
        super(props, context);

@ -90,7 +85,6 @@ export default class RightPanel extends React.Component<IProps, IState> {
    }, 500, { leading: true, trailing: true });

    public componentDidMount(): void {
-        this.dispatcherRef = dis.register(this.onAction);
        const cli = this.context;
        cli.on("RoomState.members", this.onRoomStateMember);
        RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
@ -98,7 +92,6 @@ export default class RightPanel extends React.Component<IProps, IState> {
    }

    public componentWillUnmount(): void {
-        dis.unregister(this.dispatcherRef);
        if (this.context) {
            this.context.removeListener("RoomState.members", this.onRoomStateMember);
        }
@ -153,14 +146,6 @@ export default class RightPanel extends React.Component<IProps, IState> {
        });
    };

-    private onAction = (payload: ActionPayload) => {
-        const isChangingRoom = payload.action === Action.ViewRoom && payload.room_id !== this.props.room.roomId;
-        const isViewingThread = this.state.phase === RightPanelPhases.ThreadView;
-        if (isChangingRoom && isViewingThread) {
-            dispatchShowThreadsPanelEvent();
-        }
-    };
-
    private onClose = () => {
        // XXX: There are three different ways of 'closing' this panel depending on what state
        // things are in... this knows far more than it should do about the state of the rest
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@ -94,7 +94,7 @@ import MessageComposer from '../views/rooms/MessageComposer';
 import JumpToBottomButton from "../views/rooms/JumpToBottomButton";
 import TopUnreadMessagesBar from "../views/rooms/TopUnreadMessagesBar";
 import SpaceStore from "../../stores/spaces/SpaceStore";
-import { dispatchShowThreadEvent } from '../../dispatcher/dispatch-actions/threads';
+import { showThread } from '../../dispatcher/dispatch-actions/threads';
 import { fetchInitialEvent } from "../../utils/EventUtils";
 import { ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload";
 import AppsDrawer from '../views/rooms/AppsDrawer';
@ -338,6 +338,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        if (WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room)) {
            // Show chat in right panel when a widget is maximised
            RightPanelStore.instance.setCard({ phase: RightPanelPhases.Timeline });
+        } else if (
+            RightPanelStore.instance.isOpenForRoom &&
+            RightPanelStore.instance.roomPhaseHistory.some(card => (card.phase === RightPanelPhases.Timeline))
+        ) {
+            // hide chat in right panel when the widget is minimized
+            RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary });
+            RightPanelStore.instance.togglePanel();
        }
        this.checkWidgets(this.state.room);
    };
@ -424,21 +431,21 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {

            const thread = initialEvent?.getThread();
            if (thread && !initialEvent?.isThreadRoot) {
-                dispatchShowThreadEvent(
-                    thread.rootEvent,
+                showThread({
+                    rootEvent: thread.rootEvent,
                    initialEvent,
-                    RoomViewStore.isInitialEventHighlighted(),
-                );
+                    highlighted: RoomViewStore.isInitialEventHighlighted(),
+                });
            } else {
                newState.initialEventId = initialEventId;
                newState.isInitialEventHighlighted = RoomViewStore.isInitialEventHighlighted();

                if (thread && initialEvent?.isThreadRoot) {
-                    dispatchShowThreadEvent(
-                        thread.rootEvent,
+                    showThread({
+                        rootEvent: thread.rootEvent,
                        initialEvent,
-                        RoomViewStore.isInitialEventHighlighted(),
-                    );
+                        highlighted: RoomViewStore.isInitialEventHighlighted(),
+                    });
                }
            }
        }
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@ -40,8 +40,6 @@ import UploadBar from './UploadBar';
 import { _t } from '../../languageHandler';
 import ThreadListContextMenu from '../views/context_menus/ThreadListContextMenu';
 import RightPanelStore from '../../stores/right-panel/RightPanelStore';
-import SettingsStore from '../../settings/SettingsStore';
-import { WidgetLayoutStore } from '../../stores/widgets/WidgetLayoutStore';

 interface IProps {
    room: Room;
@ -194,24 +192,6 @@ export default class ThreadView extends React.Component<IProps, IState> {
            event_id: this.state.thread?.id,
        };

-        let previousPhase = RightPanelStore.instance.previousCard.phase;
-        if (!SettingsStore.getValue("feature_maximised_widgets")) {
-            previousPhase = RightPanelPhases.ThreadPanel;
-        }
-
-        // change the previous phase to the threadPanel in case there is no maximised widget anymore
-        if (!WidgetLayoutStore.instance.hasMaximisedWidget(this.props.room)) {
-            previousPhase = RightPanelPhases.ThreadPanel;
-        }
-
-        // Make sure the previous Phase is always one of the two: Timeline or ThreadPanel
-        if (![RightPanelPhases.ThreadPanel, RightPanelPhases.Timeline].includes(previousPhase)) {
-            previousPhase = RightPanelPhases.ThreadPanel;
-        }
-        const previousPhaseLabels = {};
-        previousPhaseLabels[RightPanelPhases.ThreadPanel] = _t("All threads");
-        previousPhaseLabels[RightPanelPhases.Timeline] = _t("Chat");
-
        return (
            <RoomContext.Provider value={{
                ...this.context,
@ -222,8 +202,6 @@ export default class ThreadView extends React.Component<IProps, IState> {
                <BaseCard
                    className="mx_ThreadView mx_ThreadPanel"
                    onClose={this.props.onClose}
-                    previousPhase={previousPhase}
-                    previousPhaseLabel={previousPhaseLabels[previousPhase]}
                    withoutScrollContainer={true}
                    header={this.renderThreadViewHeader()}
                >
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@ -25,6 +25,7 @@ import { Action } from "../../../dispatcher/actions";
 import BaseAvatar from "./BaseAvatar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
+import { CardContext } from '../right_panel/BaseCard';

 interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
    member: RoomMember;
@ -36,6 +37,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
    onClick?: React.MouseEventHandler;
    // Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
    viewUserOnClick?: boolean;
+    pushUserOnClick?: boolean;
    title?: string;
    style?: any;
 }
@ -99,6 +101,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
                dis.dispatch({
                    action: Action.ViewUser,
                    member: this.props.member,
+                    push: this.context.isCard,
                });
            };
        }
@ -109,7 +112,10 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
                title={this.state.title}
                idName={userId}
                url={this.state.imageUrl}
-                onClick={onClick} />
+                onClick={onClick}
+            />
        );
    }
 }
+
+MemberAvatar.contextType = CardContext;
--- a/src/components/views/messages/MKeyVerificationRequest.tsx
+++ b/src/components/views/messages/MKeyVerificationRequest.tsx
@ -51,10 +51,11 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
    private openRequest = () => {
        const { verificationRequest } = this.props.mxEvent;
        const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId);
-        RightPanelStore.instance.setCard({
-            phase: RightPanelPhases.EncryptionPanel,
-            state: { verificationRequest, member },
-        });
+        RightPanelStore.instance.setCards([
+            { phase: RightPanelPhases.RoomSummary },
+            { phase: RightPanelPhases.RoomMemberInfo, state: { member } },
+            { phase: RightPanelPhases.EncryptionPanel, state: { verificationRequest, member } },
+        ]);
    };

    private onRequestChanged = () => {
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@ -39,8 +39,9 @@ import DownloadActionButton from "./DownloadActionButton";
 import SettingsStore from '../../../settings/SettingsStore';
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import ReplyChain from '../elements/ReplyChain';
-import { dispatchShowThreadEvent } from '../../../dispatcher/dispatch-actions/threads';
+import { showThread } from '../../../dispatcher/dispatch-actions/threads';
 import ReactionPicker from "../emojipicker/ReactionPicker";
+import { CardContext } from '../right_panel/BaseCard';

 interface IOptionsButtonProps {
    mxEvent: MatrixEvent;
@ -219,8 +220,8 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
        });
    };

-    private onThreadClick = (): void => {
-        dispatchShowThreadEvent(this.props.mxEvent);
+    private onThreadClick = (isCard: boolean): void => {
+        showThread({ rootEvent: this.props.mxEvent, push: isCard });
        dis.dispatch({
            action: Action.FocusSendMessageComposer,
            context: TimelineRenderingType.Thread,
@ -303,6 +304,17 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
            key="cancel"
        />;

+        const threadTooltipButton = <CardContext.Consumer>
+            { context =>
+                <RovingAccessibleTooltipButton
+                    className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
+                    title={_t("Reply in thread")}
+                    onClick={this.onThreadClick.bind(null, context.isCard)}
+                    key="thread"
+                />
+            }
+        </CardContext.Consumer>;
+
        // We show a different toolbar for failed events, so detect that first.
        const mxEvent = this.props.mxEvent;
        const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
@ -335,12 +347,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                            key="reply"
                        />
                        { (this.showReplyInThreadAction) && (
-                            <RovingAccessibleTooltipButton
-                                className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
-                                title={_t("Reply in thread")}
-                                onClick={this.onThreadClick}
-                                key="thread"
-                            />
+                            threadTooltipButton
                        ) }
                    </>);
                }
@ -368,12 +375,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                this.props.mxEvent.getThread() &&
                !isContentActionable(this.props.mxEvent)
            ) {
-                toolbarOpts.unshift(<RovingAccessibleTooltipButton
-                    className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
-                    title={_t("Reply in thread")}
-                    onClick={this.onThreadClick}
-                    key="thread"
-                />);
+                toolbarOpts.unshift(threadTooltipButton);
            }

            if (allowCancel) {
--- a/src/components/views/right_panel/BaseCard.tsx
+++ b/src/components/views/right_panel/BaseCard.tsx
@ -20,16 +20,15 @@ import classNames from 'classnames';
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
-import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
 import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
+import { backLabelForPhase } from '../../../stores/right-panel/RightPanelStorePhases';

+export const CardContext = React.createContext({ isCard: false });
 interface IProps {
    header?: ReactNode;
    footer?: ReactNode;
    className?: string;
    withoutScrollContainer?: boolean;
-    previousPhase?: RightPanelPhases;
-    previousPhaseLabel?: string;
    closeLabel?: string;
    onClose?(): void;
    cardState?;
@ -54,20 +53,16 @@ const BaseCard: React.FC<IProps> = ({
    header,
    footer,
    withoutScrollContainer,
-    previousPhase,
-    previousPhaseLabel,
    children,
-    cardState,
 }) => {
    let backButton;
-    if (previousPhase) {
+    const cardHistory = RightPanelStore.instance.roomPhaseHistory;
+    if (cardHistory.length > 1) {
+        const prevCard = cardHistory[cardHistory.length - 2];
        const onBackClick = () => {
-            // TODO RightPanelStore (will be addressed in a follow up PR): this should ideally be:
-            // RightPanelStore.instance.popRightPanel();
-
-            RightPanelStore.instance.setCard({ phase: previousPhase, state: cardState });
+            RightPanelStore.instance.popCard();
        };
-        const label = previousPhaseLabel ?? _t("Back");
+        const label = backLabelForPhase(prevCard.phase) ?? _t("Back");
        backButton = <AccessibleButton className="mx_BaseCard_back" onClick={onBackClick} title={label} />;
    }

@ -87,15 +82,17 @@ const BaseCard: React.FC<IProps> = ({
    }

    return (
-        <div className={classNames("mx_BaseCard", className)}>
-            <div className="mx_BaseCard_header">
-                { backButton }
-                { closeButton }
-                { header }
+        <CardContext.Provider value={{ isCard: true }}>
+            <div className={classNames("mx_BaseCard", className)}>
+                <div className="mx_BaseCard_header">
+                    { backButton }
+                    { closeButton }
+                    { header }
+                </div>
+                { children }
+                { footer && <div className="mx_BaseCard_footer">{ footer }</div> }
            </div>
-            { children }
-            { footer && <div className="mx_BaseCard_footer">{ footer }</div> }
-        </div>
+        </CardContext.Provider>
    );
 };

--- a/src/components/views/right_panel/EncryptionPanel.tsx
+++ b/src/components/views/right_panel/EncryptionPanel.tsx
@ -116,10 +116,13 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
        setRequest(verificationRequest_);
        setPhase(verificationRequest_.phase);
        // Notify the RightPanelStore about this
-        RightPanelStore.instance.setCard({
-            phase: RightPanelPhases.EncryptionPanel,
-            state: { member, verificationRequest: verificationRequest_ },
-        });
+        if (RightPanelStore.instance.currentCard.phase != RightPanelPhases.EncryptionPanel) {
+            RightPanelStore.instance.pushCard({
+                phase: RightPanelPhases.EncryptionPanel,
+                state: { member, verificationRequest: verificationRequest_ },
+            });
+        }
+        if (!RightPanelStore.instance.isOpenForRoom) RightPanelStore.instance.togglePanel();
    }, [member]);

    const requested =
--- a/src/components/views/right_panel/GroupHeaderButtons.tsx
+++ b/src/components/views/right_panel/GroupHeaderButtons.tsx
@ -28,6 +28,7 @@ import { Action } from "../../../dispatcher/actions";
 import { ActionPayload } from "../../../dispatcher/payloads";
 import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import RightPanelStore from '../../../stores/right-panel/RightPanelStore';

 const GROUP_PHASES = [
    RightPanelPhases.GroupMemberInfo,
@ -49,7 +50,11 @@ export default class GroupHeaderButtons extends HeaderButtons {
    protected onAction(payload: ActionPayload) {
        if (payload.action === Action.ViewUser) {
            if ((payload as ViewUserPayload).member) {
-                this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member });
+                RightPanelStore.instance.setCards([
+                    { phase: RightPanelPhases.GroupRoomInfo },
+                    { phase: RightPanelPhases.GroupMemberList },
+                    { phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } },
+                ]);
            } else {
                this.setPhase(RightPanelPhases.GroupMemberList);
            }
--- a/src/components/views/right_panel/HeaderButtons.tsx
+++ b/src/components/views/right_panel/HeaderButtons.tsx
@ -71,7 +71,13 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
    protected abstract onAction(payload);

    public setPhase(phase: RightPanelPhases, cardState?: Partial<IRightPanelCardState>) {
-        RightPanelStore.instance.setCard({ phase, state: cardState });
+        const rps = RightPanelStore.instance;
+        if (rps.currentCard.phase == phase && !cardState && rps.isOpenForRoom) {
+            rps.togglePanel();
+        } else {
+            RightPanelStore.instance.setCard({ phase, state: cardState });
+            if (!rps.isOpenForRoom) rps.togglePanel();
+        }
    }

    public isPhase(phases: string | string[]) {
--- a/src/components/views/right_panel/RoomHeaderButtons.tsx
+++ b/src/components/views/right_panel/RoomHeaderButtons.tsx
@ -32,7 +32,7 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { useSettingValue } from "../../../hooks/useSettings";
 import { useReadPinnedEvents, usePinnedEvents } from './PinnedMessagesCard';
-import { dispatchShowThreadsPanelEvent } from "../../../dispatcher/dispatch-actions/threads";
+import { showThreadPanel } from "../../../dispatcher/dispatch-actions/threads";
 import SettingsStore from "../../../settings/SettingsStore";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import { NotificationColor } from "../../../stores/notifications/NotificationColor";
@ -154,7 +154,17 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
    protected onAction(payload: ActionPayload) {
        if (payload.action === Action.ViewUser) {
            if (payload.member) {
-                this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member });
+                if (payload.push) {
+                    RightPanelStore.instance.pushCard(
+                        { phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } },
+                    );
+                } else {
+                    RightPanelStore.instance.setCards([
+                        { phase: RightPanelPhases.RoomSummary },
+                        { phase: RightPanelPhases.RoomMemberList },
+                        { phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } },
+                    ]);
+                }
            } else {
                this.setPhase(RightPanelPhases.RoomMemberList);
            }
@ -199,7 +209,7 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
        if (RoomHeaderButtons.THREAD_PHASES.includes(this.state.phase)) {
            RightPanelStore.instance.togglePanel();
        } else {
-            dispatchShowThreadsPanelEvent();
+            showThreadPanel();
        }
    };

--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@ -102,8 +102,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
    }, [room.roomId]);

    const onOpenWidgetClick = () => {
-        // TODO RightPanelStore (will be addressed in a follow up PR): should push the widget
-        RightPanelStore.instance.setCard({
+        RightPanelStore.instance.pushCard({
            phase: RightPanelPhases.Widget,
            state: { widgetId: app.id },
        });
@ -234,13 +233,11 @@ const AppsSection: React.FC<IAppsSectionProps> = ({ room }) => {
 };

 export const onRoomMembersClick = (allowClose = true) => {
-    // TODO RightPanelStore (will be addressed in a follow up PR): should push the phase
-    RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomMemberList }, allowClose);
+    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, allowClose);
 };

 export const onRoomFilesClick = (allowClose = true) => {
-    // TODO RightPanelStore (will be addressed in a follow up PR): should push the phase
-    RightPanelStore.instance.setCard({ phase: RightPanelPhases.FilePanel }, allowClose);
+    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, allowClose);
 };

 const onRoomSettingsClick = () => {
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@ -1651,21 +1651,15 @@ const UserInfo: React.FC<IProps> = ({
    const classes = ["mx_UserInfo"];

    let cardState: IRightPanelCardState;
-    let previousPhase: RightPanelPhases;
    // We have no previousPhase for when viewing a UserInfo from a Group or without a Room at this time
    if (room && phase === RightPanelPhases.EncryptionPanel) {
-        previousPhase = RightPanelPhases.RoomMemberInfo;
        cardState = { member };
    } else if (room?.isSpaceRoom() && SpaceStore.spacesEnabled) {
-        previousPhase = RightPanelPhases.SpaceMemberList;
        cardState = { spaceId: room.roomId };
-    } else if (room) {
-        previousPhase = RightPanelPhases.RoomMemberList;
    }

    const onEncryptionPanelClose = () => {
-        // TODO RightPanelStore (will be addressed in a follow up PR): here we want to pop the panel
-        RightPanelStore.instance.setCard({ phase: previousPhase, state: cardState });
+        RightPanelStore.instance.popCard();
    };

    let content;
@ -1679,7 +1673,8 @@ const UserInfo: React.FC<IProps> = ({
                    member={member as User}
                    groupId={groupId as string}
                    devices={devices}
-                    isRoomEncrypted={isRoomEncrypted} />
+                    isRoomEncrypted={isRoomEncrypted}
+                />
            );
            break;
        case RightPanelPhases.EncryptionPanel:
@ -1720,7 +1715,6 @@ const UserInfo: React.FC<IProps> = ({
        header={header}
        onClose={onClose}
        closeLabel={closeLabel}
-        previousPhase={previousPhase}
        cardState={cardState}
    >
        { content }
--- a/src/components/views/right_panel/WidgetCard.tsx
+++ b/src/components/views/right_panel/WidgetCard.tsx
@ -23,7 +23,6 @@ import WidgetUtils from "../../../utils/WidgetUtils";
 import AppTile from "../elements/AppTile";
 import { _t } from "../../../languageHandler";
 import { useWidgets } from "./RoomSummaryCard";
-import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
 import { ChevronFace, ContextMenuButton, useContextMenu } from "../../structures/ContextMenu";
 import WidgetContextMenu from "../context_menus/WidgetContextMenu";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
@ -48,9 +47,7 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
    useEffect(() => {
        if (!app || isPinned) {
            // stop showing this card
-
-            //TODO RightPanelStore (will be addressed in a follow up PR): here we want to just pop the widget card.
-            RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary });
+            RightPanelStore.instance.popCard();
        }
    }, [app, isPinned]);

@ -88,7 +85,6 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
        header={header}
        className="mx_WidgetCard"
        onClose={onClose}
-        previousPhase={RightPanelPhases.RoomSummary}
        withoutScrollContainer
    >
        <AppTile
--- a/src/components/views/rooms/EventTile.tsx
+++ b/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
--- a/src/components/views/rooms/MemberList.tsx
+++ b/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
--- a/src/components/views/rooms/MemberTile.tsx
+++ b/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,
        });
    };

--- a/src/components/views/toasts/VerificationRequestToast.tsx
+++ b/src/components/views/toasts/VerificationRequestToast.tsx
@ -115,11 +115,13 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
                    room_id: request.channel.roomId,
                    should_peek: false,
                });
-                RightPanelStore.instance.setCard(
-                    {
-                        phase: RightPanelPhases.EncryptionPanel,
-                        state: { verificationRequest: request, member: cli.getUser(request.otherUserId) },
-                    },
+                const member = cli.getUser(request.otherUserId);
+                RightPanelStore.instance.setCards(
+                    [
+                        { phase: RightPanelPhases.RoomSummary },
+                        { phase: RightPanelPhases.RoomMemberInfo, state: { member } },
+                        { phase: RightPanelPhases.EncryptionPanel, state: { verificationRequest: request, member } },
+                    ],
                    undefined,
                    request.channel.roomId,
                );