Starred Messages View Screen

res/css/_components.pcss

@@ -37,6 +37,7 @@
 @import "./components/views/settings/shared/_SettingsSubsection.pcss";
 @import "./components/views/spaces/_QuickThemeSwitcher.pcss";
 @import "./structures/_AutoHideScrollbar.pcss";
+@import "./structures/_FavouriteMessagesView.pcss";
 @import "./structures/_BackdropPanel.pcss";
 @import "./structures/_CompatibilityPage.pcss";
 @import "./structures/_ContextualMenu.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

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

src/PosthogTrackers.ts

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

src/components/structures/FavouriteMessagesView/ConfirmClearDialog.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 } 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 starred messages.
+ */
+const ConfirmClearDialog: FC<IDialogProps> = (props: IDialogProps) => {
+    const { clearFavouriteMessages } = useFavouriteMessages();
+
+    const onConfirmClick = () => {
+        clearFavouriteMessages();
+        props.onFinished();
+    };
+
+    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 starred messages? ") } </span>
+                </div>
+            </div>
+            <DialogButtons
+                primaryButton={_t("Confirm")}
+                onPrimaryButtonClick={onConfirmClick}
+                onCancel={props.onFinished}
+                hasCancel={true}
+            />
+        </BaseDialog>
+    );
+};
+
+export default ConfirmClearDialog;

src/components/structures/FavouriteMessagesView/FavouriteMessageTile.tsx

@@ -0,0 +1,111 @@
+/*
+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 } 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";
+
+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[];
+}
+
+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");
+    const isTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
+    const alwaysShowTimestamps = SettingsStore.getValue("alwaysShowTimestamps");
+    const threadsEnabled = SettingsStore.getValue("feature_thread");
+
+    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 = prevEv &&
+                !wantsDateSeparator((prevEv.getDate())!, mxEv.getDate()) &&
+                shouldFormContinuation(
+                    prevEv,
+                    mxEv,
+                    context?.showHiddenEvents,
+                    threadsEnabled,
+                );
+
+            let lastInSection = true;
+            const nextEv = props?.timeline[j + 1];
+            if (nextEv) {
+                const willWantDateSeparator = wantsDateSeparator((mxEv.getDate())!, nextEv.getDate());
+                lastInSection = (
+                    willWantDateSeparator ||
+                    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}
+                />,
+            );
+        }
+    }
+
+    return <li data-scroll-tokens={eventId}>
+        <ol>{ ret }</ol>
+    </li>;
+};
+
+export default FavouriteMessageTile;