Consolidate all the work thus far

src/components/structures/ContextMenu.tsx

@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {CSSProperties, useRef, useState} from "react";
+import React, {CSSProperties, RefObject, useRef, useState} from "react";
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 
@@ -416,8 +416,8 @@ export const aboveLeftOf = (elementRect: DOMRect, chevronFace = ChevronFace.None
     return menuOptions;
 };
 
-export const useContextMenu = () => {
-    const button = useRef(null);
+export const useContextMenu = (): [boolean, RefObject<HTMLElement>, () => void, () => void, (val: boolean) => void] => {
+    const button = useRef<HTMLElement>(null);
     const [isOpen, setIsOpen] = useState(false);
     const open = () => {
         setIsOpen(true);

src/components/structures/FilePanel.js

@@ -23,6 +23,8 @@ import * as sdk from '../../index';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';
+import BaseCard from "../views/right_panel/BaseCard";
+import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
 
 /*
  * Component which shows the filtered file using a TimelinePanel
@@ -30,6 +32,7 @@ import { _t } from '../../languageHandler';
 class FilePanel extends React.Component {
     static propTypes = {
         roomId: PropTypes.string.isRequired,
+        onClose: PropTypes.func.isRequired,
     };
 
     // This is used to track if a decrypted event was a live event and should be
@@ -188,18 +191,26 @@ class FilePanel extends React.Component {
 
     render() {
         if (MatrixClientPeg.get().isGuest()) {
-            return <div className="mx_FilePanel mx_RoomView_messageListWrapper">
+            return <BaseCard
+                className="mx_FilePanel mx_RoomView_messageListWrapper"
+                onClose={this.props.onClose}
+                previousPhase={RightPanelPhases.RoomSummary}
+            >
                 <div className="mx_RoomView_empty">
                 { _t("You must <a>register</a> to use this functionality",
                     {},
                     { 'a': (sub) => <a href="#/register" key="sub">{ sub }</a> })
                 }
                 </div>
-            </div>;
+            </BaseCard>;
         } else if (this.noRoom) {
-            return <div className="mx_FilePanel mx_RoomView_messageListWrapper">
+            return <BaseCard
+                className="mx_FilePanel mx_RoomView_messageListWrapper"
+                onClose={this.props.onClose}
+                previousPhase={RightPanelPhases.RoomSummary}
+            >
                 <div className="mx_RoomView_empty">{ _t("You must join the room to see its files") }</div>
-            </div>;
+            </BaseCard>;
         }
 
         // wrap a TimelinePanel with the jump-to-event bits turned off.
@@ -215,7 +226,11 @@ class FilePanel extends React.Component {
             // console.log("rendering TimelinePanel for timelineSet " + this.state.timelineSet.room.roomId + " " +
             //             "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
             return (
-                <div className="mx_FilePanel" role="tabpanel">
+                <BaseCard
+                    className="mx_FilePanel"
+                    onClose={this.props.onClose}
+                    previousPhase={RightPanelPhases.RoomSummary}
+                >
                     <TimelinePanel
                         manageReadReceipts={false}
                         manageReadMarkers={false}
@@ -226,13 +241,17 @@ class FilePanel extends React.Component {
                         resizeNotifier={this.props.resizeNotifier}
                         empty={emptyState}
                     />
-                </div>
+                </BaseCard>
             );
         } else {
             return (
-                <div className="mx_FilePanel" role="tabpanel">
+                <BaseCard
+                    className="mx_FilePanel"
+                    onClose={this.props.onClose}
+                    previousPhase={RightPanelPhases.RoomSummary}
+                >
                     <Loader />
-                </div>
+                </BaseCard>
             );
         }
     }

src/components/structures/NotificationPanel.js

@@ -17,14 +17,21 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from "prop-types";
+
 import { _t } from '../../languageHandler';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import * as sdk from "../../index";
+import BaseCard from "../views/right_panel/BaseCard";
 
 /*
  * Component which shows the global notification list using a TimelinePanel
  */
 class NotificationPanel extends React.Component {
+    static propTypes = {
+        onClose: PropTypes.func.isRequired,
+    };
+
     render() {
         // wrap a TimelinePanel with the jump-to-event bits turned off.
         const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
@@ -35,28 +42,27 @@ class NotificationPanel extends React.Component {
             <p>{_t('You have no visible notifications in this room.')}</p>
         </div>);
 
+        let content;
         const timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
         if (timelineSet) {
-            return (
-                <div className="mx_NotificationPanel" role="tabpanel">
-                    <TimelinePanel
-                        manageReadReceipts={false}
-                        manageReadMarkers={false}
-                        timelineSet={timelineSet}
-                        showUrlPreview={false}
-                        tileShape="notif"
-                        empty={emptyState}
-                    />
-                </div>
+            content = (
+                <TimelinePanel
+                    manageReadReceipts={false}
+                    manageReadMarkers={false}
+                    timelineSet={timelineSet}
+                    showUrlPreview={false}
+                    tileShape="notif"
+                    empty={emptyState}
+                />
             );
         } else {
             console.error("No notifTimelineSet available!");
-            return (
-                <div className="mx_NotificationPanel" role="tabpanel">
-                    <Loader />
-                </div>
-            );
+            content = <Loader />;
         }
+
+        return <BaseCard className="mx_NotificationPanel" onClose={this.props.onClose}>
+            { content }
+        </BaseCard>;
     }
 }
 

src/components/structures/RoomView.js

@@ -56,6 +56,7 @@ import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { shieldStatusForRoom } from '../../utils/ShieldUtils';
 import {Action} from "../../dispatcher/actions";
 import {SettingLevel} from "../../settings/SettingLevel";
+import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
 
 const DEBUG = false;
 let debuglog = function() {};
@@ -1356,7 +1357,10 @@ export default class RoomView extends React.Component {
     };
 
     onSettingsClick = () => {
-        dis.dispatch({ action: 'open_room_settings' });
+        dis.dispatch({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.RoomSummary,
+        });
     };
 
     onCancelClick = () => {