made favourited messages panel act like a room

src/PageTypes.ts

@@ -21,6 +21,7 @@ enum PageType {
     RoomView = "room_view",
     UserView = "user_view",
     LegacyGroupView = "legacy_group_view",
+    FavouriteMessagesView = "favourite_messages_view"
 }
 
 export default PageType;

src/components/structures/FavouriteMessagesView.tsx

@@ -0,0 +1,91 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2018, 2019 New Vector Ltd
+Copyright 2019 - 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient, MatrixEvent } from 'matrix-js-sdk/src/matrix';
+import React, { useContext, useRef } from 'react';
+
+import MatrixClientContext from '../../contexts/MatrixClientContext';
+import { _t } from '../../languageHandler';
+import { RoomViewStore } from '../../stores/RoomViewStore';
+import FavouriteMessageTile from '../views/rooms/FavouriteMessageTile';
+import ScrollPanel from './ScrollPanel';
+
+function getFavouriteMessagesTiles(cli: MatrixClient, favouriteMessageEvents) {
+    const ret = [];
+    let lastRoomId: string;
+
+    for (let i = (favouriteMessageEvents?.length || 0) - 1; i >= 0; i--) {
+        const timeline = [] as MatrixEvent[];
+        const resultObj = favouriteMessageEvents[i];
+        const roomId = resultObj.roomId;
+        const room = cli.getRoom(roomId);
+        const mxEvent = room.findEventById(resultObj.eventId);
+        timeline.push(mxEvent);
+
+        if (roomId !== lastRoomId) {
+            ret.push(<li key={mxEvent?.getId() + "-room"}>
+                <h2>{ _t("Room") }: { room.name }</h2>
+            </li>);
+            lastRoomId = roomId;
+        }
+
+        const resultLink = "#/room/"+roomId+"/"+mxEvent.getId();
+
+        ret.push(
+            <FavouriteMessageTile
+                key={mxEvent.getId()}
+                result={mxEvent}
+                resultLink={resultLink}
+                timeline={timeline}
+            />,
+        );
+    }
+    return ret;
+}
+
+let favouriteMessagesPanel;
+
+const FavouriteMessagesView = () => {
+    const favouriteMessageEvents= JSON.parse(
+        localStorage?.getItem("io_element_favouriteMessages") ?? "[]") as any[];
+
+    const favouriteMessagesPanelRef = useRef<ScrollPanel>();
+    const isFavMessagesBtnClicked = RoomViewStore.instance.getFavouriteStatus();
+    const cli = useContext<MatrixClient>(MatrixClientContext);
+
+    if (isFavMessagesBtnClicked) {
+        if (favouriteMessageEvents?.length === 0) {
+            favouriteMessagesPanel = (<h2 className="mx_RoomView_topMarker">{ _t("No Saved Messages") }</h2>);
+        } else {
+            favouriteMessagesPanel = (
+                <ScrollPanel
+                    ref={favouriteMessagesPanelRef}
+                    className="mx_RoomView_searchResultsPanel "
+                >
+                    { getFavouriteMessagesTiles(cli, favouriteMessageEvents) }
+                </ScrollPanel>
+            );
+        }
+    }
+    return (
+        <> { favouriteMessagesPanel } </>
+    );
+};
+
+export default FavouriteMessagesView;

src/components/structures/LeftPanel.tsx

@@ -371,6 +371,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             onResize={this.refreshStickyHeaders}
             onListCollapse={this.refreshStickyHeaders}
             ref={this.roomListRef}
+            pageType={this.props.pageType}
         />;
 
         const containerClasses = classNames({

src/components/structures/LoggedInView.tsx

@@ -71,6 +71,7 @@ import LegacyGroupView from "./LegacyGroupView";
 import { IConfigOptions } from "../../IConfigOptions";
 import LeftPanelLiveShareWarning from '../views/beacon/LeftPanelLiveShareWarning';
 import { UserOnboardingPage } from '../views/user-onboarding/UserOnboardingPage';
+import FavouriteMessagesView from './FavouriteMessagesView';
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -645,6 +646,10 @@ class LoggedInView extends React.Component<IProps, IState> {
             case PageTypes.LegacyGroupView:
                 pageElement = <LegacyGroupView groupId={this.props.currentGroupId} />;
                 break;
+
+            case PageTypes.FavouriteMessagesView:
+                pageElement = <FavouriteMessagesView />;
+                break;
         }
 
         const wrapperClasses = classNames({

src/components/structures/MatrixChat.tsx

@@ -803,6 +803,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 hideAnalyticsToast();
                 SettingsStore.setValue("pseudonymousAnalyticsOptIn", null, SettingLevel.ACCOUNT, true);
                 break;
+            case Action.ViewFavouriteMessages:
+                this.viewFavouriteMessages();
+                break;
             case Action.PseudonymousAnalyticsReject:
                 hideAnalyticsToast();
                 SettingsStore.setValue("pseudonymousAnalyticsOptIn", null, SettingLevel.ACCOUNT, false);
@@ -1007,6 +1010,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.themeWatcher.recheck();
     }
 
+    private viewFavouriteMessages() {
+        this.setPage(PageType.FavouriteMessagesView);
+        this.notifyNewScreen('favourite_messages');
+    }
+
     private viewUser(userId: string, subAction: string) {
         // Wait for the first sync so that `getRoom` gives us a room object if it's
         // in the sync response
@@ -1704,6 +1712,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             dis.dispatch({
                 action: Action.ViewHomePage,
             });
+        } else if (screen === 'favourite_messages') {
+            dis.dispatch({
+                action: Action.ViewFavouriteMessages,
+            });
         } else if (screen === 'start') {
             this.showScreen('home');
             dis.dispatch({

src/components/structures/RoomView.tsx

@@ -119,7 +119,6 @@ import { isLocalRoom } from '../../utils/localRoom/isLocalRoom';
 import { ShowThreadPayload } from "../../dispatcher/payloads/ShowThreadPayload";
 import { RoomStatusBarUnsentMessages } from './RoomStatusBarUnsentMessages';
 import { LargeLoader } from './LargeLoader';
-import FavouriteMessageTile from '../views/rooms/FavouriteMessageTile';
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -374,7 +373,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     private roomView = createRef<HTMLElement>();
     private searchResultsPanel = createRef<ScrollPanel>();
     private messagePanel: TimelinePanel;
-    private favouriteMessagesPanel = createRef<ScrollPanel>();
     private roomViewBody = createRef<HTMLDivElement>();
 
     static contextType = MatrixClientContext;
@@ -565,7 +563,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             wasContextSwitch: RoomViewStore.instance.getWasContextSwitch(),
             initialEventId: null, // default to clearing this, will get set later in the method if needed
             showRightPanel: RightPanelStore.instance.isOpenForRoom(roomId),
-            isFavMessagesBtnClicked: RoomViewStore.instance.getFavouriteStatus(),
         };
 
         const initialEventId = RoomViewStore.instance.getInitialEventId();
@@ -1576,51 +1573,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         });
     }
 
-    private favouriteMessageEvents= JSON.parse(
-        localStorage?.getItem("io_element_favouriteMessages") ?? "[]") as any[];
-
-    private getFavouriteMessagesTiles() {
-        const ret = [];
-        let lastRoomId: string;
-
-        const onHeightChanged = () => {
-            const scrollPanel = this.searchResultsPanel.current;
-            if (scrollPanel) {
-                scrollPanel.checkScroll();
-            }
-        };
-
-        for (let i = (this.favouriteMessageEvents?.length || 0) - 1; i >= 0; i--) {
-            const timeline = [] as MatrixEvent[];
-            const resultObj = this.favouriteMessageEvents[i];
-            const roomId = resultObj.roomId;
-            const room = this.context.getRoom(roomId);
-            const mxEvent = room.findEventById(resultObj.eventId);
-            timeline.push(mxEvent);
-
-            if (roomId !== lastRoomId) {
-                ret.push(<li key={mxEvent?.getId() + "-room"}>
-                    <h2>{ _t("Room") }: { room.name }</h2>
-                </li>);
-                lastRoomId = roomId;
-            }
-
-            const resultLink = "#/room/"+roomId+"/"+mxEvent.getId();
-
-            ret.push(
-                <FavouriteMessageTile
-                    key={mxEvent.getId()}
-                    result={mxEvent}
-                    resultLink={resultLink}
-                    permalinkCreator={this.getPermalinkCreatorForRoom(room)}
-                    onHeightChanged={onHeightChanged}
-                    timeline={timeline}
-                />,
-            );
-        }
-        return ret;
-    }
-
     private getSearchResultTiles() {
         // XXX: todo: merge overlapping results somehow?
         // XXX: why doesn't searching on name work?
@@ -2281,9 +2233,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         // if we have search results, we keep the messagepanel (so that it preserves its
         // scroll state), but hide it.
         let searchResultsPanel;
-        let favouriteMessagesPanel;
         let hideMessagePanel = false;
-        const isFavMessagesBtnClicked = RoomViewStore.instance.getFavouriteStatus();
 
         if (this.state.searchResults) {
             // show searching spinner
@@ -2307,24 +2257,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             hideMessagePanel = true;
         }
 
-        if (isFavMessagesBtnClicked) {
-            if (this.favouriteMessageEvents?.length === 0) {
-                favouriteMessagesPanel = (<h2 className="mx_RoomView_topMarker">{ _t("No Saved Messages") }</h2>);
-            } else {
-                favouriteMessagesPanel = (
-                    <ScrollPanel
-                        ref={this.favouriteMessagesPanel}
-                        className={"mx_RoomView_searchResultsPanel " + this.messagePanelClassNames}
-                        resizeNotifier={this.props.resizeNotifier}
-                    >
-                        <li className={scrollheaderClasses} />
-                        { this.getFavouriteMessagesTiles() }
-                    </ScrollPanel>
-                );
-            }
-            hideMessagePanel = true;
-        }
-
         let highlightedEventId = null;
         if (this.state.isInitialEventHighlighted) {
             highlightedEventId = this.state.initialEventId;
@@ -2414,11 +2346,10 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                         { jumpToBottom }
                         { messagePanel }
                         { searchResultsPanel }
-                        { favouriteMessagesPanel }
                     </div>
                     { statusBarArea }
                     { previewBar }
-                    { !isFavMessagesBtnClicked && messageComposer }
+                    { messageComposer }
                 </>;
                 break;
             case MainSplitContentType.MaximisedWidget:
@@ -2496,7 +2427,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                             appsShown={this.state.showApps}
                             onCallPlaced={onCallPlaced}
                             excludedRightPanelPhaseButtons={excludedRightPanelPhaseButtons}
-                            showButtons={!isFavMessagesBtnClicked && !this.viewsLocalRoom}
+                            showButtons={!this.viewsLocalRoom}
                             enableRoomOptionsMenu={!this.viewsLocalRoom}
                         />
                         <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>

src/components/views/rooms/RoomList.tsx

@@ -31,6 +31,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
 import { _t, _td } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import PageType from "../../../PageTypes";
 import PosthogTrackers from "../../../PosthogTrackers";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIComponent } from "../../../settings/UIFeature";
@@ -72,6 +73,7 @@ interface IProps {
     resizeNotifier: ResizeNotifier;
     isMinimized: boolean;
     activeSpace: SpaceKey;
+    pageType: PageType;
 }
 
 interface IState {
@@ -457,8 +459,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     metricsViaKeyboard: true,
                 });
             }
-            // RoomViewStore.instance.setFavouriteStatus(false);
-            // console.log(RoomViewStore.instance.getFavouriteStatus());
         } else if (payload.action === Action.PstnSupportUpdated) {
             this.updateLists();
         }
@@ -522,7 +522,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 this.props.onResize();
             });
         }
-        RoomViewStore.instance.setFavouriteStatus(false);
     };
 
     private renderSuggestedRooms(): ReactComponentElement<typeof ExtraTile>[] {
@@ -576,23 +575,15 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 resizeMethod="crop"
             />);
 
-        // const opts = { createOpts: {
-        //     name: "Favourites",
-        // } };
-
-        // const callFavRoomMethod = async () => {
-        //     const favouriteRoomId = await createRoom(opts);
-        //     console.log("FAVOURITE FAKE ROOMID", favouriteRoomId);
-        // };
-
         const onFavouriteClicked = () => {
             RoomViewStore.instance.setFavouriteStatus(true);
+            defaultDispatcher.dispatch({ action: Action.ViewFavouriteMessages });
         };
 
         return [
             <ExtraTile
                 isMinimized={this.props.isMinimized}
-                isSelected={false}
+                isSelected={this.props.pageType === PageType.FavouriteMessagesView}
                 displayName="Favourite Messages"
                 avatar={avatar}
                 onClick={onFavouriteClicked}

src/dispatcher/actions.ts

@@ -331,4 +331,9 @@ export enum Action {
      * Fired when we want to view a thread, either a new one or an existing one
      */
     ShowThread = "show_thread",
+
+    /**
+     * Fired when we want to view a favourite messages panel
+     */
+    ViewFavouriteMessages = "view_favourite_messages",
 }

src/stores/RoomViewStore.tsx

@@ -165,7 +165,7 @@ export class RoomViewStore extends Store<ActionPayload> {
     }
 
     public setFavouriteStatus = (val: boolean) => {
-        dis.dispatch({ action: "view_favourite_messages", val });
+        dis.dispatch({ action: Action.ViewFavouriteMessages, val });
     };
 
     public getFavouriteStatus = () => this.state.isFavouriteClicked;
@@ -191,8 +191,10 @@ export class RoomViewStore extends Store<ActionPayload> {
                     wasContextSwitch: false,
                 });
                 break;
-            case "view_favourite_messages":
+            case Action.ViewFavouriteMessages:
                 this.setState({
+                    roomId: null,
+                    roomAlias: null,
                     isFavouriteClicked: payload.val,
                 });
                 break;