Only show core navigation elements (call/chat/notification/info) when a widget is maximised

res/css/_components.scss

@@ -204,6 +204,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,35 @@
+/*
+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,6 +329,13 @@ 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);
     };
 
@@ -2089,7 +2098,14 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             />);
         }
 
-        const showRightPanel = this.state.room && this.state.showRightPanel;
+        let showRightPanel = this.state.room && this.state.showRightPanel;
+        // This is a hack to hide the chat. This should not be necassary once the right panel
+        // phase is stored per room.
+        if (RightPanelStore.getSharedInstance().roomPanelPhase === RightPanelPhases.Timeline
+            && this.state.mainSplitContentType === MainSplitContentType.Timeline ) {
+            // Two timelines are shown prevent this by hiding the right panel
+            showRightPanel = false;
+        }
         const rightPanel = showRightPanel
             ? <RightPanel
                 room={this.state.room}
@@ -2158,6 +2174,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                             onAppsClick={this.state.hasPinnedWidgets ? this.onAppsClick : null}
                             appsShown={this.state.showApps}
                             onCallPlaced={this.onCallPlaced}
+                            coreElementsOnly={this.state.mainSplitContentType === MainSplitContentType.MaximisedWidget}
                         />
                         <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
                             <div className="mx_RoomView_body">

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

@@ -475,10 +475,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();
         }
@@ -593,7 +590,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/elements/AppTile.tsx

@@ -88,6 +88,9 @@ interface IState {
 }
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { RightPanelPhases } from '../../../stores/RightPanelStorePhases';
+import { Action } from '../../../dispatcher/actions';
+import RightPanelStore from '../../../stores/RightPanelStore';
 
 @replaceableComponent("views.elements.AppTile")
 export default class AppTile extends React.Component<IProps, IState> {
@@ -406,6 +409,11 @@ export default class AppTile extends React.Component<IProps, IState> {
             ? Container.Right
             : Container.Center;
         WidgetLayoutStore.instance.moveToContainer(this.props.room, this.props.app, targetContainer);
+        if (targetContainer === Container.Right
+            && RightPanelStore.getSharedInstance().visibleRoomPanelPhase === RightPanelPhases.Timeline) {
+            // If the widget gets closed also close the RightPanel chat.
+            dis.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.RoomSummary });
+        }
     };
 
     private onContextMenuClick = (): void => {

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -67,8 +67,28 @@ const PinnedMessagesHeaderButton = ({ room, isHighlighted, onClick }) => {
     </HeaderButton>;
 };
 
+const TimelineCardHeaderButton = ({ room, isHighlighted, showNewMessage, onClick }) => {
+    if (!SettingsStore.getValue("feature_maximised_widgets")) return null;
+
+    let unreadIndicator;
+    if (/*pinnedEvents.some(id => !readPinnedEvents.has(id)*/ showNewMessage) {
+        unreadIndicator = <div className="mx_RightPanel_pinnedMessagesButton_unreadIndicator" />;
+    }
+
+    return <HeaderButton
+        name="timelineCardButton"
+        title={_t("Chat")}
+        isHighlighted={isHighlighted}
+        onClick={onClick}
+        analytics={["Right Panel", "Timeline Panel Button", "click"]}
+    >
+        { unreadIndicator }
+    </HeaderButton>;
+};
+
 interface IProps {
     room?: Room;
+    coreElementsOnly?: boolean;
 }
 
 @replaceableComponent("views.right_panel.RoomHeaderButtons")
@@ -122,6 +142,9 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
         // This toggles for us, if needed
         this.setPhase(RightPanelPhases.PinnedMessages);
     };
+    private onTimelineCardClicked = () => {
+        this.setPhase(RightPanelPhases.Timeline);
+    };
 
     private onThreadsPanelClicked = () => {
         if (RoomHeaderButtons.THREAD_PHASES.includes(this.state.phase)) {
@@ -136,12 +159,18 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
 
     public renderButtons() {
         return <>
-            <PinnedMessagesHeaderButton
+            { !this.props.coreElementsOnly && <PinnedMessagesHeaderButton
                 room={this.props.room}
                 isHighlighted={this.isPhase(RightPanelPhases.PinnedMessages)}
                 onClick={this.onPinnedMessagesClicked}
-            />
-            { SettingsStore.getValue("feature_thread") && <HeaderButton
+            /> }
+            { this.props.coreElementsOnly && <TimelineCardHeaderButton
+                room={this.props.room}
+                isHighlighted={this.isPhase(RightPanelPhases.Timeline)}
+                showNewMessage={false}
+                onClick={this.onTimelineCardClicked}
+            /> }
+            { (!this.props.coreElementsOnly && SettingsStore.getValue("feature_thread")) && <HeaderButton
                 name="threadsButton"
                 title={_t("Threads")}
                 onClick={this.onThreadsPanelClicked}

src/components/views/right_panel/TimelineCard.tsx

@@ -0,0 +1,103 @@
+/*
+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.
+*/
+
+import React from 'react';
+import { MatrixEvent, Room } from 'matrix-js-sdk/src';
+import { Thread } from 'matrix-js-sdk/src/models/thread';
+
+import BaseCard from "./BaseCard";
+
+import ResizeNotifier from '../../../utils/ResizeNotifier';
+import MessageComposer from '../rooms/MessageComposer';
+import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
+import { Layout } from '../../../settings/enums/Layout';
+import TimelinePanel from '../../structures/TimelinePanel';
+import { E2EStatus } from '../../../utils/ShieldUtils';
+import EditorStateTransfer from '../../../utils/EditorStateTransfer';
+import RoomContext from '../../../contexts/RoomContext';
+
+import { _t } from '../../../languageHandler';
+import { replaceableComponent } from '../../../utils/replaceableComponent';
+
+interface IProps {
+    room: Room;
+    onClose: () => void;
+    resizeNotifier: ResizeNotifier;
+    permalinkCreator?: RoomPermalinkCreator;
+    e2eStatus?: E2EStatus;
+    initialEvent?: MatrixEvent;
+    initialEventHighlighted?: boolean;
+}
+interface IState {
+    thread?: Thread;
+    editState?: EditorStateTransfer;
+    replyToEvent?: MatrixEvent;
+}
+
+@replaceableComponent("structures.TimelineCard")
+export default class TimelineCard extends React.Component<IProps, IState> {
+    static contextType = RoomContext;
+
+    constructor(props: IProps) {
+        super(props);
+        this.state = {};
+    }
+
+    private renderTimelineCardHeader = (): JSX.Element => {
+        return <div className="mx_TimelineCard__header">
+            <span>{ _t("Chat") }</span>
+        </div>;
+    };
+
+    public render(): JSX.Element {
+        return (
+            <BaseCard
+                className="mx_ThreadPanel mx_TimelineCard"
+                onClose={this.props.onClose}
+                withoutScrollContainer={true}
+                header={this.renderTimelineCardHeader()}
+            >
+                <TimelinePanel
+                    showReadReceipts={true}
+                    manageReadReceipts={true}
+                    manageReadMarkers={false} // No RM support in the TimelineCard
+                    sendReadReceiptOnLoad={true}
+                    timelineSet={this.props.room.getUnfilteredTimelineSet()}
+                    showUrlPreview={true}
+                    layout={Layout.Group}
+                    hideThreadedMessages={false}
+                    hidden={false}
+                    showReactions={true}
+                    className="mx_RoomView_messagePanel mx_GroupLayout"
+                    permalinkCreator={this.props.permalinkCreator}
+                    membersLoaded={true}
+                    editState={this.state.editState}
+                    eventId={this.props.initialEvent?.getId()}
+                    resizeNotifier={this.props.resizeNotifier}
+                />
+
+                <MessageComposer
+                    room={this.props.room}
+                    resizeNotifier={this.props.resizeNotifier}
+                    replyToEvent={this.state.replyToEvent}
+                    permalinkCreator={this.props.permalinkCreator}
+                    e2eStatus={this.props.e2eStatus}
+                    compact={true}
+                />
+            </BaseCard>
+        );
+    }
+}

src/components/views/rooms/EventTile.tsx

@@ -619,11 +619,8 @@ export default class EventTile extends React.Component<IProps, IState> {
             <div
                 className="mx_ThreadInfo"
                 onClick={() => {
-                    dispatchShowThreadEvent(
-                        this.props.mxEvent,
-                    );
-                }}
-            >
+                    dispatchShowThreadEvent(this.props.mxEvent);
+                }}>
                 <span className="mx_ThreadInfo_threads-amount">
                     { _t("%(count)s reply", {
                         count: this.thread.length,