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,97 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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;
+
+    &--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;
+            }
+    }
+
+    &--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]: "favourite_messages",
 };
 
 export default class PosthogTrackers {

src/components/structures/FavouriteMessagesView/ConfirmClearDialog.tsx

@@ -0,0 +1,63 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+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 BaseDialog from "../../views/dialogs/BaseDialog";
+import { IDialogProps } from '../../views/dialogs/IDialogProps';
+import DialogButtons from "../../views/elements/DialogButtons";
+
+interface IProps extends IDialogProps {
+    title?: string;
+    description?: string;
+    button?: string;
+    hasCancel?: boolean;
+}
+
+/*
+ * A dialog for confirming a clearing of starred messages.
+ */
+const ConfirmClearDialog: FC<IProps> = (props: IProps) => {
+    const { clearFavouriteMessages } = useFavouriteMessages();
+
+    const onConfirmClick = () => {
+        clearFavouriteMessages();
+        props.onFinished();
+    };
+
+    return (
+        <BaseDialog
+            className="mx_TextInputDialog mx_ClearDialog"
+            onFinished={props.onFinished}
+            title={props.title}
+        >
+            <div className="mx_Dialog_content">
+                <div className="mx_TextInputDialog_label">
+                    <span> { props.description } </span>
+                </div>
+            </div>
+            <DialogButtons
+                primaryButton={props.button}
+                onPrimaryButtonClick={onConfirmClick}
+                onCancel={props.onFinished}
+                hasCancel={props.hasCancel}
+            />
+        </BaseDialog>
+    );
+};
+
+export default ConfirmClearDialog;

src/components/structures/FavouriteMessagesView/FavouriteMessageTile.tsx

@@ -0,0 +1,117 @@
+/*
+Copyright 2015 OpenMarket Ltd
+Copyright 2019 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 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[];
+}
+
+export default class FavouriteMessageTile extends React.Component<IProps> {
+    static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
+
+    constructor(props, context) {
+        super(props, context);
+    }
+
+    public render() {
+        const result = this.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 < this.props.timeline.length; j++) {
+            const mxEv = this.props.timeline[j];
+            const highlights = this.props.searchHighlights;
+
+            if (haveRendererForEvent(mxEv, this.context?.showHiddenEvents)) {
+                // do we need a date separator since the last event?
+                const prevEv = this.props.timeline[j - 1];
+                // is this a continuation of the previous message?
+                const continuation = prevEv &&
+                    !wantsDateSeparator(prevEv.getDate(), mxEv.getDate()) &&
+                    shouldFormContinuation(
+                        prevEv,
+                        mxEv,
+                        this.context?.showHiddenEvents,
+                        threadsEnabled,
+                    );
+
+                let lastInSection = true;
+                const nextEv = this.props.timeline[j + 1];
+                if (nextEv) {
+                    const willWantDateSeparator = wantsDateSeparator(mxEv.getDate(), nextEv.getDate());
+                    lastInSection = (
+                        willWantDateSeparator ||
+                        mxEv.getSender() !== nextEv.getSender() ||
+                        !shouldFormContinuation(
+                            mxEv,
+                            nextEv,
+                            this.context?.showHiddenEvents,
+                            threadsEnabled,
+                        )
+                    );
+                }
+
+                ret.push(
+                    <EventTile
+                        key={`${eventId}+${j}`}
+                        mxEvent={mxEv}
+                        layout={layout}
+                        highlights={highlights}
+                        permalinkCreator={this.props.permalinkCreator}
+                        highlightLink={this.props.resultLink}
+                        onHeightChanged={this.props.onHeightChanged}
+                        isTwelveHour={isTwelveHour}
+                        alwaysShowTimestamps={alwaysShowTimestamps}
+                        lastInSection={lastInSection}
+                        continuation={continuation}
+                    />,
+                );
+            }
+        }
+
+        return <li data-scroll-tokens={eventId}>
+            <ol>{ ret }</ol>
+        </li>;
+    }
+}