Display favourite messages in a room-like view

res/css/_components.pcss

@@ -53,6 +53,7 @@
 @import "./structures/_CompatibilityPage.pcss";
 @import "./structures/_ContextualMenu.pcss";
 @import "./structures/_ErrorMessage.pcss";
+@import "./structures/_FavouriteMessagesView.pcss";
 @import "./structures/_FileDropTarget.pcss";
 @import "./structures/_FilePanel.pcss";
 @import "./structures/_GenericDropdownMenu.pcss";

res/css/structures/_FavouriteMessagesView.pcss

@@ -0,0 +1,96 @@
+/*
+Copyright 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.
+*/
+
+.mx_FavMessagesHeader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    flex: 0 0 50px;
+    border-bottom: 1px solid $primary-hairline-color;
+    background-color: $background;
+    z-index: 999;
+}
+
+.mx_FavMessagesHeader_Wrapper {
+    height: 44px;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    margin: 0 20px 0 16px;
+    padding-top: 8px;
+    border-bottom: 1px solid $system;
+    justify-content: space-between;
+
+    .mx_FavMessagesHeader_Wrapper_left {
+        display: flex;
+        align-items: center;
+        flex: 0.4;
+
+        & > span {
+            color: $primary-content;
+            font-weight: $font-semi-bold;
+            font-size: $font-18px;
+            margin: 0 8px;
+        }
+    }
+
+    .mx_FavMessagesHeader_Wrapper_right {
+        display: flex;
+        align-items: center;
+        flex: 0.6;
+        justify-content: flex-end;
+    }
+}
+
+.mx_FavMessagesHeader_sortButton::before {
+    mask-image: url("$(res)/img/element-icons/room/sort-twoway.svg");
+}
+
+.mx_FavMessagesHeader_clearAllButton::before {
+    mask-image: url("$(res)/img/element-icons/room/clear-all.svg");
+}
+
+.mx_FavMessagesHeader_cancelButton {
+    background-color: $alert;
+    mask: url("$(res)/img/cancel.svg");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 17px;
+    padding: 9px;
+    margin: 0 12px 0 3px;
+    cursor: pointer;
+}
+
+.mx_FavMessagesHeader_Search {
+    width: 70%;
+}
+
+.mx_FavouriteMessages_emptyMarker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 25px;
+    font-weight: 600;
+}
+
+.mx_FavouriteMessages_scrollPanel {
+    margin-top: 25px;
+}
+
+.mx_ClearDialog {
+    width: 100%;
+}

src/PageTypes.ts

@@ -20,6 +20,7 @@ enum PageType {
     HomePage = "home_page",
     RoomView = "room_view",
     UserView = "user_view",
+    FavouriteMessagesView = "favourite_messages_view",
 }
 
 export default PageType;

src/PosthogTrackers.ts

@@ -41,6 +41,7 @@ const loggedInPageTypeMap: Record<PageType, ScreenName> = {
     [PageType.HomePage]: "Home",
     [PageType.RoomView]: "Room",
     [PageType.UserView]: "User",
+    [PageType.FavouriteMessagesView]: "FavouriteMessages",
 };
 
 export default class PosthogTrackers {

src/components/structures/FavouriteMessagesView/ConfirmClearFavouritesDialog.tsx

@@ -0,0 +1,57 @@
+/*
+Copyright 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 React, { FC, useCallback } from "react";
+
+import useFavouriteMessages from "../../../hooks/useFavouriteMessages";
+import { _t } from "../../../languageHandler";
+import BaseDialog from "../../views/dialogs/BaseDialog";
+import { IDialogProps } from "../../views/dialogs/IDialogProps";
+import DialogButtons from "../../views/elements/DialogButtons";
+
+/**
+ * A dialog for confirming a clearing of favourite messages.
+ */
+const ConfirmClearFavouritesDialog: FC<IDialogProps> = (props: IDialogProps) => {
+    const { clearFavouriteMessages } = useFavouriteMessages();
+
+    const onConfirmClick = useCallback(() => {
+        clearFavouriteMessages();
+        props.onFinished();
+    }, [props, clearFavouriteMessages]);
+
+    return (
+        <BaseDialog
+            className="mx_TextInputDialog mx_ClearDialog"
+            onFinished={props.onFinished}
+            title={_t("Confirm Removal")}
+        >
+            <div className="mx_Dialog_content">
+                <div className="mx_TextInputDialog_label">
+                    <span> {_t("Are you sure you wish to clear all your favourite messages? ")} </span>
+                </div>
+            </div>
+            <DialogButtons
+                primaryButton={_t("Confirm")}
+                onPrimaryButtonClick={onConfirmClick}
+                onCancel={props.onFinished}
+                hasCancel={true}
+            />
+        </BaseDialog>
+    );
+};
+
+export default ConfirmClearFavouritesDialog;

src/components/structures/FavouriteMessagesView/FavouriteMessageTile.tsx

@@ -0,0 +1,121 @@
+/*
+Copyright 2023 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 React, { FC } from "react";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+import RoomContext from "../../../contexts/RoomContext";
+import SettingsStore from "../../../settings/SettingsStore";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+import DateSeparator from "../../views/messages/DateSeparator";
+import EventTile from "../../views/rooms/EventTile";
+import { shouldFormContinuation } from "../MessagePanel";
+import { wantsDateSeparator } from "../../../DateUtils";
+import { haveRendererForEvent } from "../../../events/EventTileFactory";
+import { Layout } from "../../../settings/enums/Layout";
+import { FavouriteMessagesStore } from "../../../stores/FavouriteMessagesStore";
+
+interface IProps {
+    // an event result object
+    result: MatrixEvent;
+    // href for the highlights in this result
+    resultLink: string;
+    // a list of strings to be highlighted in the results
+    searchHighlights?: string[];
+    onHeightChanged?: () => void;
+    permalinkCreator?: RoomPermalinkCreator;
+    //a list containing the saved items events
+    timeline: MatrixEvent[];
+
+    // Provide this to use a different store for favourite messages
+    // e.g. in tests. If not supplied, we use the global default.
+    favouriteMessagesStore?: FavouriteMessagesStore;
+}
+
+const FavouriteMessageTile: FC<IProps> = (props: IProps) => {
+    let context!: React.ContextType<typeof RoomContext>;
+
+    const result = props.result;
+    const eventId = result.getId();
+
+    const ts1 = result?.getTs();
+    const ret = [<DateSeparator key={ts1 + "-search"} roomId={result.getRoomId()!} ts={ts1} />];
+    const layout = SettingsStore.getValue<Layout>("layout");
+    const isTwelveHour = !!SettingsStore.getValue<boolean>("showTwelveHourTimestamps");
+    const alwaysShowTimestamps = !!SettingsStore.getValue<boolean>("alwaysShowTimestamps");
+    const threadsEnabled = !!SettingsStore.getValue<boolean>("feature_threadenabled");
+
+    for (let j = 0; j < props?.timeline.length; j++) {
+        const mxEv = props?.timeline[j];
+        const highlights = props?.searchHighlights;
+
+        if (haveRendererForEvent(mxEv, context?.showHiddenEvents)) {
+            // do we need a date separator since the last event?
+            const prevEv = props.timeline[j - 1];
+            // is this a continuation of the previous message?
+            const continuation =
+                !dateSeparator(prevEv, mxEv) &&
+                shouldFormContinuation(prevEv, mxEv, context?.showHiddenEvents, threadsEnabled);
+
+            let lastInSection = true;
+            const nextEv = props?.timeline[j + 1];
+            if (nextEv) {
+                lastInSection =
+                    dateSeparator(mxEv, nextEv) ||
+                    mxEv.getSender() !== nextEv.getSender() ||
+                    !shouldFormContinuation(mxEv, nextEv, context?.showHiddenEvents, threadsEnabled);
+            }
+
+            ret.push(
+                <EventTile
+                    key={`${eventId}+${j}`}
+                    mxEvent={mxEv}
+                    layout={layout}
+                    highlights={highlights}
+                    permalinkCreator={props.permalinkCreator}
+                    highlightLink={props.resultLink}
+                    onHeightChanged={props.onHeightChanged}
+                    isTwelveHour={isTwelveHour}
+                    alwaysShowTimestamps={alwaysShowTimestamps}
+                    lastInSection={lastInSection}
+                    continuation={continuation}
+                    isFavouritesView={true}
+                    favouriteMessagesStore={props.favouriteMessagesStore}
+                />,
+            );
+        }
+    }
+
+    return (
+        <li data-scroll-tokens={eventId}>
+            <ol>{ret}</ol>
+        </li>
+    );
+};
+
+function dateSeparator(event1: MatrixEvent | undefined, event2: MatrixEvent | undefined): boolean {
+    if (!event1 || !event2) {
+        return false;
+    }
+    const date1 = event1.getDate();
+    const date2 = event2.getDate();
+    if (!date1 || !date2) {
+        return false;
+    }
+    return wantsDateSeparator(date1, date2);
+}
+
+export default FavouriteMessageTile;