Consolidate all the work thus far

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -39,7 +39,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import BaseAvatar from "../avatars/BaseAvatar";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {IApp, WidgetStore} from "../../../stores/WidgetStore";
+import WidgetStore, {IApp} from "../../../stores/WidgetStore";
 
 interface IProps {
     room: Room;

src/components/views/right_panel/UserInfo.js

@@ -46,6 +46,7 @@ import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
 import { verifyUser, legacyVerifyUser, verifyDevice } from '../../../verification';
 import {Action} from "../../../dispatcher/actions";
 import {useIsEncrypted} from "../../../hooks/useIsEncrypted";
+import BaseCard from "./BaseCard";
 
 const _disambiguateDevices = (devices) => {
     const names = Object.create(null);
@@ -451,7 +452,7 @@ const _isMuted = (member, powerLevelContent) => {
     return member.powerLevel < levelToSend;
 };
 
-const useRoomPowerLevels = (cli, room) => {
+export const useRoomPowerLevels = (cli, room) => {
     const [powerLevels, setPowerLevels] = useState({});
 
     const update = useCallback(() => {
@@ -1364,16 +1365,9 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     </React.Fragment>;
 };
 
-const UserInfoHeader = ({onClose, member, e2eStatus}) => {
+const UserInfoHeader = ({member, e2eStatus}) => {
     const cli = useContext(MatrixClientContext);
 
-    let closeButton;
-    if (onClose) {
-        closeButton = <AccessibleButton className="mx_UserInfo_cancel" onClick={onClose} title={_t('Close')}>
-            <div />
-        </AccessibleButton>;
-    }
-
     const onMemberAvatarClick = useCallback(() => {
         const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
         if (!avatarUrl) return;
@@ -1448,7 +1442,6 @@ const UserInfoHeader = ({onClose, member, e2eStatus}) => {
 
     const displayName = member.name || member.displayname;
     return <React.Fragment>
-        { closeButton }
         { avatarElement }
 
         <div className="mx_UserInfo_container mx_UserInfo_separator">
@@ -1510,15 +1503,16 @@ const UserInfo = ({user, groupId, roomId, onClose, phase=RightPanelPhases.RoomMe
             break;
     }
 
-    return (
-        <div className={classes.join(" ")} role="tabpanel">
-            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
-                <UserInfoHeader member={member} e2eStatus={e2eStatus} onClose={onClose} />
+    let previousPhase: RightPanelPhases;
+    // We have no previousPhase for when viewing a UserInfo from a Group or without a Room at this time
+    if (room) {
+        previousPhase = RightPanelPhases.RoomMemberList;
+    }
 
-                { content }
-            </AutoHideScrollbar>
-        </div>
-    );
+    const header = <UserInfoHeader member={member} e2eStatus={e2eStatus} onClose={onClose} />;
+    return <BaseCard className={classes.join(" ")} header={header} onClose={onClose} previousPhase={previousPhase}>
+        { content }
+    </BaseCard>;
 };
 
 UserInfo.propTypes = {

src/components/views/right_panel/WidgetCard.tsx

@@ -28,7 +28,15 @@ import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
 import {Action} from "../../../dispatcher/actions";
-import {WidgetStore} from "../../../stores/WidgetStore";
+import WidgetStore from "../../../stores/WidgetStore";
+import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
+import {ChevronFace, ContextMenuButton, useContextMenu} from "../../structures/ContextMenu";
+import IconizedContextMenu, {
+    IconizedContextMenuOption,
+    IconizedContextMenuOptionList,
+} from "../context_menus/IconizedContextMenu";
+import {AppTileActionPayload} from "../../../dispatcher/payloads/AppTileActionPayload";
+import {Capability} from "../../../widgets/WidgetApi";
 
 interface IProps {
     room: Room;
@@ -50,6 +58,8 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
     const app = apps.find(a => a.id === widgetId);
     const isPinned = app && WidgetStore.instance.isPinned(app.id);
 
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
+
     useEffect(() => {
         if (!app || isPinned) {
             // TODO maybe we should do this in the ActiveWidgetStore instead
@@ -64,6 +74,58 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
         <h2>{ WidgetUtils.getWidgetName(app) }</h2>
     </React.Fragment>;
 
+    const canModify = WidgetUtils.canUserModifyWidgets(room.roomId);
+
+    let contextMenu;
+    if (menuDisplayed) {
+        let snapshotButton;
+        if (ActiveWidgetStore.widgetHasCapability(app.id, Capability.Screenshot)) {
+            const onSnapshotClick = () => {
+                WidgetUtils.snapshotWidget(app);
+                closeMenu();
+            };
+
+            snapshotButton = <IconizedContextMenuOption onClick={onSnapshotClick} label={_t("Take a picture")} />;
+        }
+
+        let deleteButton;
+        if (canModify) {
+            const onDeleteClick = () => {
+                defaultDispatcher.dispatch<AppTileActionPayload>({
+                    action: Action.AppTileDelete,
+                    widgetId: app.id,
+                });
+                closeMenu();
+            };
+
+            deleteButton = <IconizedContextMenuOption onClick={onDeleteClick} label={_t("Remove for everyone")} />;
+        }
+
+        const onRevokeClick = () => {
+            defaultDispatcher.dispatch<AppTileActionPayload>({
+                action: Action.AppTileRevoke,
+                widgetId: app.id,
+            });
+            closeMenu();
+        };
+
+        const rect = handle.current.getBoundingClientRect();
+        contextMenu = (
+            <IconizedContextMenu
+                chevronFace={ChevronFace.None}
+                right={window.innerWidth - rect.right}
+                bottom={window.innerHeight - rect.top}
+                onFinished={closeMenu}
+            >
+                <IconizedContextMenuOptionList>
+                    { snapshotButton }
+                    { deleteButton }
+                    <IconizedContextMenuOption onClick={onRevokeClick} label={_t("Remove for me")} />
+                </IconizedContextMenuOptionList>
+            </IconizedContextMenu>
+        );
+    }
+
     const onPinClick = () => {
         WidgetStore.instance.pinWidget(app.id);
     };
@@ -73,12 +135,24 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
     };
 
     const footer = <React.Fragment>
-        <AccessibleButton kind="secondary" onClick={onPinClick}>
-            { _t("Pin to room") }
-        </AccessibleButton>
-        <AccessibleButton kind="secondary" onClick={onEditClick}>
+        <AccessibleButton kind="secondary" onClick={onEditClick} disabled={!canModify}>
             { _t("Edit") }
         </AccessibleButton>
+        <AccessibleButton kind="secondary" onClick={onPinClick} disabled={!WidgetStore.instance.canPin(app.id)}>
+            { _t("Pin to room") }
+        </AccessibleButton>
+        <ContextMenuButton
+            kind="secondary"
+            className={""}
+            inputRef={handle}
+            onClick={openMenu}
+            isExpanded={menuDisplayed}
+            label={_t("Options")}
+        >
+            ...
+        </ContextMenuButton>
+
+        { contextMenu }
     </React.Fragment>;
 
     return <BaseCard