Add right panel chat timeline (#7112)

Co-authored-by: J. Ryan Stinnett <[email protected]>

Author: toger5

res/css/_components.scss

@@ -205,6 +205,7 @@
 @import "./views/right_panel/_PinnedMessagesCard.scss";
 @import "./views/right_panel/_RoomSummaryCard.scss";
 @import "./views/right_panel/_ThreadPanel.scss";
+@import "./views/right_panel/_TimelineCard.scss";
 @import "./views/right_panel/_UserInfo.scss";
 @import "./views/right_panel/_VerificationPanel.scss";
 @import "./views/right_panel/_WidgetCard.scss";

res/css/structures/_RightPanel.scss

@@ -144,6 +144,13 @@ $pulse-color: $alert;
     }
 }
 
+.mx_RightPanel_timelineCardButton {
+    &::before {
+        mask-image: url('$(res)/img/element-icons/feedback.svg');
+        mask-position: center;
+    }
+}
+
 @keyframes mx_RightPanel_indicator_pulse {
     0% {
         transform: scale(0.95);

res/css/views/right_panel/_TimelineCard.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2021 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_TimelineCard {
+    .mx_TimelineCard__header {
+        margin-left: 6px;
+
+        span:first-of-type {
+            font-weight: 600;
+            font-size: 15px;
+            line-height: 18px;
+            color: $secondary-content;
+        }
+    }
+
+    .mx_BaseCard_header {
+        margin: 5px 0 9px 0;
+        .mx_BaseCard_close {
+            margin: 8px;
+            right: 0;
+        }
+    }
+}

src/components/structures/RightPanel.tsx

@@ -54,6 +54,7 @@ import SpaceStore from "../../stores/spaces/SpaceStore";
 import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
 import { E2EStatus } from '../../utils/ShieldUtils';
 import { dispatchShowThreadsPanelEvent } from '../../dispatcher/dispatch-actions/threads';
+import TimelineCard from '../views/right_panel/TimelineCard';
 
 interface IProps {
     room?: Room; // if showing panels for a given room, this is set
@@ -334,7 +335,13 @@ export default class RightPanel extends React.Component<IProps, IState> {
                     panel = <PinnedMessagesCard room={this.props.room} onClose={this.onClose} />;
                 }
                 break;
-
+            case RightPanelPhases.Timeline:
+                if (!SettingsStore.getValue("feature_maximised_widgets")) break;
+                panel = <TimelineCard
+                    room={this.props.room}
+                    resizeNotifier={this.props.resizeNotifier}
+                    onClose={this.onClose} />;
+                break;
             case RightPanelPhases.FilePanel:
                 panel = <FilePanel roomId={roomId} resizeNotifier={this.props.resizeNotifier} onClose={this.onClose} />;
                 break;

src/components/structures/RoomView.tsx

@@ -96,6 +96,8 @@ import { dispatchShowThreadEvent } from '../../dispatcher/dispatch-actions/threa
 import { fetchInitialEvent } from "../../utils/EventUtils";
 import { ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload";
 import AppsDrawer from '../views/rooms/AppsDrawer';
+import { SetRightPanelPhasePayload } from '../../dispatcher/payloads/SetRightPanelPhasePayload';
+import { RightPanelPhases } from '../../stores/RightPanelStorePhases';
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -327,7 +329,15 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
     private onWidgetLayoutChange = () => {
         if (!this.state.room) return;
+        if (WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room)) {
+            // Show chat in right panel when a widget is maximised
+            dis.dispatch<SetRightPanelPhasePayload>({
+                action: Action.SetRightPanelPhase,
+                phase: RightPanelPhases.Timeline,
+            });
+        }
         this.checkWidgets(this.state.room);
+        this.checkRightPanel(this.state.room);
     };
 
     private checkWidgets = (room) => {
@@ -345,6 +355,22 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             : MainSplitContentType.Timeline;
     };
 
+    private checkRightPanel = (room) => {
+        // This is a hack to hide the chat. This should not be necessary once the right panel
+        // phase is stored per room. (need to be done after check widget so that mainSplitContentType is updated)
+        if (
+            RightPanelStore.getSharedInstance().roomPanelPhase === RightPanelPhases.Timeline &&
+            this.state.showRightPanel &&
+            !WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room)
+        ) {
+            // Two timelines are shown prevent this by hiding the right panel
+            dis.dispatch({
+                action: Action.ToggleRightPanel,
+                type: "room",
+            });
+        }
+    };
+
     private onReadReceiptsChange = () => {
         this.setState({
             showReadReceipts: SettingsStore.getValue("showReadReceipts", this.state.roomId),
@@ -1007,6 +1033,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         this.updateE2EStatus(room);
         this.updatePermissions(room);
         this.checkWidgets(room);
+        this.checkRightPanel(room);
 
         this.setState({
             liveTimeline: room.getLiveTimeline(),
@@ -2102,6 +2129,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         }
 
         const showRightPanel = this.state.room && this.state.showRightPanel;
+
         const rightPanel = showRightPanel
             ? <RightPanel
                 room={this.state.room}

src/components/structures/ThreadView.tsx

@@ -41,6 +41,8 @@ import ContentMessages from '../../ContentMessages';
 import UploadBar from './UploadBar';
 import { _t } from '../../languageHandler';
 import ThreadListContextMenu from '../views/context_menus/ThreadListContextMenu';
+import RightPanelStore from '../../stores/RightPanelStore';
+import SettingsStore from '../../settings/SettingsStore';
 
 interface IProps {
     room: Room;
@@ -203,6 +205,18 @@ export default class ThreadView extends React.Component<IProps, IState> {
             event_id: this.state.thread?.id,
         };
 
+        let previousPhase = RightPanelStore.getSharedInstance().previousPhase;
+        if (!SettingsStore.getValue("feature_maximised_widgets")) {
+            previousPhase = RightPanelPhases.ThreadPanel;
+        }
+        // Make sure the previous Phase is always one of the two: Timeline or ThreadPanel
+        if (![RightPanelPhases.ThreadPanel, RightPanelPhases.Timeline].includes(previousPhase)) {
+            previousPhase = RightPanelPhases.ThreadPanel;
+        }
+        const previousPhaseLabels = {};
+        previousPhaseLabels[RightPanelPhases.ThreadPanel] = _t("All threads");
+        previousPhaseLabels[RightPanelPhases.Timeline] = _t("Chat");
+
         return (
             <RoomContext.Provider value={{
                 ...this.context,
@@ -213,8 +227,8 @@ export default class ThreadView extends React.Component<IProps, IState> {
                 <BaseCard
                     className="mx_ThreadView mx_ThreadPanel"
                     onClose={this.props.onClose}
-                    previousPhase={RightPanelPhases.ThreadPanel}
-                    previousPhaseLabel={_t("All threads")}
+                    previousPhase={previousPhase}
+                    previousPhaseLabel={previousPhaseLabels[previousPhase]}
                     withoutScrollContainer={true}
                     header={this.renderThreadViewHeader()}
                 >

src/components/structures/TimelinePanel.tsx

@@ -476,10 +476,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
     };
 
     private onMessageListScroll = e => {
-        if (this.props.onScroll) {
-            this.props.onScroll(e);
-        }
-
+        this.props.onScroll?.(e);
         if (this.props.manageReadMarkers) {
             this.doManageReadMarkers();
         }
@@ -594,7 +591,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
             this.setState<null>(updatedState, () => {
                 this.messagePanel.current.updateTimelineMinHeight();
                 if (callRMUpdated) {
-                    this.props.onReadMarkerUpdated();
+                    this.props.onReadMarkerUpdated?.();
                 }
             });
         });

src/components/views/context_menus/MessageContextMenu.tsx

@@ -40,6 +40,7 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { IPosition, ChevronFace } from '../../structures/ContextMenu';
 import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
+import { WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore';
 
 export function canCancel(eventStatus: EventStatus): boolean {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
@@ -404,9 +405,12 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         );
         const isThreadRootEvent = isThread && this.props.mxEvent?.getThread()?.rootEvent === this.props.mxEvent;
 
+        const isMainSplitTimelineShown = !WidgetLayoutStore.instance.hasMaximisedWidget(
+            MatrixClientPeg.get().getRoom(mxEvent.getRoomId()),
+        );
         const commonItemsList = (
             <IconizedContextMenuOptionList>
-                { isThreadRootEvent && <IconizedContextMenuOption
+                { (isThreadRootEvent && isMainSplitTimelineShown) && <IconizedContextMenuOption
                     iconClassName="mx_MessageContextMenu_iconViewInRoom"
                     label={_t("View in room")}
                     onClick={this.viewInRoom}

src/components/views/context_menus/ThreadListContextMenu.tsx

@@ -24,6 +24,8 @@ import { copyPlaintext } from "../../../utils/strings";
 import { ChevronFace, ContextMenuTooltipButton } from "../../structures/ContextMenu";
 import { _t } from "../../../languageHandler";
 import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
+import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -80,6 +82,9 @@ const ThreadListContextMenu: React.FC<IProps> = ({ mxEvent, permalinkCreator, on
         }
     }, [optionsPosition, onMenuToggle]);
 
+    const isMainSplitTimelineShown = !WidgetLayoutStore.instance.hasMaximisedWidget(
+        MatrixClientPeg.get().getRoom(mxEvent.getRoomId()),
+    );
     return <React.Fragment>
         <ContextMenuTooltipButton
             className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
@@ -95,11 +100,12 @@ const ThreadListContextMenu: React.FC<IProps> = ({ mxEvent, permalinkCreator, on
             {...contextMenuBelow(optionsPosition)}
         >
             <IconizedContextMenuOptionList>
-                <IconizedContextMenuOption
-                    onClick={(e) => viewInRoom(e)}
-                    label={_t("View in room")}
-                    iconClassName="mx_ThreadPanel_viewInRoom"
-                />
+                { isMainSplitTimelineShown &&
+                 <IconizedContextMenuOption
+                     onClick={(e) => viewInRoom(e)}
+                     label={_t("View in room")}
+                     iconClassName="mx_ThreadPanel_viewInRoom"
+                 /> }
                 <IconizedContextMenuOption
                     onClick={(e) => copyLinkToThread(e)}
                     label={_t("Copy link to thread")}

src/components/views/elements/AppTile.tsx

@@ -402,9 +402,9 @@ export default class AppTile extends React.Component<IProps, IState> {
 
     private onMaxMinWidgetClick = (): void => {
         const targetContainer =
-        WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center)
-            ? Container.Right
-            : Container.Center;
+            WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center)
+                ? Container.Right
+                : Container.Center;
         WidgetLayoutStore.instance.moveToContainer(this.props.room, this.props.app, targetContainer);
     };