Favourite Messages view

res/css/_components.pcss

@@ -48,6 +48,7 @@
 @import "./compound/_Icon.pcss";
 @import "./structures/_AutoHideScrollbar.pcss";
 @import "./structures/_AutocompleteInput.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

@@ -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/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,103 @@
+/*
+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_threadstable");
+
+    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;

src/components/structures/FavouriteMessagesView/FavouriteMessagesHeader.tsx

@@ -0,0 +1,101 @@
+/*
+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, { useState } from "react";
+
+import { Action } from "../../../dispatcher/actions";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import useFavouriteMessages from "../../../hooks/useFavouriteMessages";
+import { _t } from "../../../languageHandler";
+import RoomAvatar from "../../views/avatars/RoomAvatar";
+import AccessibleTooltipButton from "../../views/elements/AccessibleTooltipButton";
+
+interface IProps {
+    query: string;
+    handleSearchQuery: (query: string) => void;
+}
+
+const FavouriteMessagesHeader = ({ query, handleSearchQuery }: IProps) => {
+    const { getFavouriteMessages } = useFavouriteMessages();
+    const favouriteMessagesIds = getFavouriteMessages();
+
+    const [isSearchClicked, setSearchClicked] = useState<boolean>(false);
+    const [sortAscending, setSortAscending] = useState<boolean>();
+
+    const onClearClick = () => {
+        if (favouriteMessagesIds.length > 0) {
+            defaultDispatcher.dispatch({ action: Action.OpenClearModal });
+        }
+    };
+
+    return (
+        <div className="mx_FavMessagesHeader">
+            <div className="mx_FavMessagesHeader_Wrapper">
+                <div className="mx_FavMessagesHeader_Wrapper_left">
+                    <RoomAvatar
+                        oobData={{
+                            name: "Favourites",
+                        }}
+                        width={26}
+                        height={26}
+                        resizeMethod="crop"
+                    />
+                    <span>Favourite Messages</span>
+                </div>
+                <div className="mx_FavMessagesHeader_Wrapper_right">
+                    {isSearchClicked ? (
+                        <>
+                            <input
+                                type="text"
+                                className="mx_FavMessagesHeader_Search"
+                                placeholder="Search..."
+                                onChange={(e) => handleSearchQuery(e.target.value)}
+                                value={query}
+                            />
+                            <AccessibleTooltipButton
+                                className="mx_FavMessagesHeader_cancelButton"
+                                onClick={() => setSearchClicked(false)}
+                                title={_t("Cancel")}
+                                key="cancel"
+                            />
+                        </>
+                    ) : (
+                        <AccessibleTooltipButton
+                            className="mx_RoomHeader_button mx_RoomHeader_searchButton"
+                            onClick={() => setSearchClicked(true)}
+                            title={_t("Search")}
+                            key="search"
+                        />
+                    )}
+                    <AccessibleTooltipButton
+                        className="mx_RoomHeader_button mx_FavMessagesHeader_sortButton"
+                        onClick={() => setSortAscending(!sortAscending)}
+                        title={_t("Reorder")}
+                        key="reorder"
+                    />
+                    <AccessibleTooltipButton
+                        className="mx_RoomHeader_button mx_FavMessagesHeader_clearAllButton"
+                        onClick={onClearClick}
+                        title={_t("Clear")}
+                        key="clear"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FavouriteMessagesHeader;