Spaces let users switch between Home and All Rooms behaviours

res/css/structures/_SpacePanel.scss

@@ -297,7 +297,7 @@ $activeBorderColor: $secondary-fg-color;
         .mx_SpaceButton:hover,
         .mx_SpaceButton:focus-within,
         .mx_SpaceButton_hasMenuOpen {
-            &:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) {
+            &:not(.mx_SpaceButton_invite) {
                 // Hide the badge container on hover because it'll be a menu button
                 .mx_SpacePanel_badgeContainer {
                     width: 0;
@@ -368,6 +368,14 @@ $activeBorderColor: $secondary-fg-color;
     .mx_SpacePanel_iconExplore::before {
         mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
     }
+
+    .mx_SpacePanel_noIcon {
+        display: none;
+
+        & + .mx_IconizedContextMenu_label {
+            padding-left: 5px !important; // override default iconized label style to align with header
+        }
+    }
 }
 
 

res/css/views/context_menus/_IconizedContextMenu.scss

@@ -149,12 +149,17 @@ limitations under the License.
         }
     }
 
-    .mx_IconizedContextMenu_checked {
+    .mx_IconizedContextMenu_checked,
+    .mx_IconizedContextMenu_unchecked {
         margin-left: 16px;
         margin-right: -5px;
+    }
 
-        &::before {
-            mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
-        }
+    .mx_IconizedContextMenu_checked::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
+    }
+
+    .mx_IconizedContextMenu_unchecked::before {
+        content: unset;
     }
 }

res/css/views/settings/tabs/_SettingsTab.scss

@@ -72,6 +72,13 @@ limitations under the License.
     padding-right: 10px;
 }
 
+.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_microcopy {
+    margin-top: 4px;
+    font-size: $font-12px;
+    line-height: $font-15px;
+    color: $secondary-fg-color;
+}
+
 .mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
     float: right;
 }

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, RefObject, useRef, useState } from "react";
+import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 
@@ -461,10 +461,14 @@ type ContextMenuTuple<T> = [boolean, RefObject<T>, () => void, () => void, (val:
 export const useContextMenu = <T extends any = HTMLElement>(): ContextMenuTuple<T> => {
     const button = useRef<T>(null);
     const [isOpen, setIsOpen] = useState(false);
-    const open = () => {
+    const open = (ev?: SyntheticEvent) => {
+        ev?.preventDefault();
+        ev?.stopPropagation();
         setIsOpen(true);
     };
-    const close = () => {
+    const close = (ev?: SyntheticEvent) => {
+        ev?.preventDefault();
+        ev?.stopPropagation();
         setIsOpen(false);
     };
 

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -86,7 +86,10 @@ export const IconizedContextMenuCheckbox: React.FC<ICheckboxProps> = ({
     >
         <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
         <span className="mx_IconizedContextMenu_label">{ label }</span>
-        { active && <span className="mx_IconizedContextMenu_icon mx_IconizedContextMenu_checked" /> }
+        <span className={classNames("mx_IconizedContextMenu_icon", {
+            mx_IconizedContextMenu_checked: active,
+            mx_IconizedContextMenu_unchecked: !active,
+        })} />
     </MenuItemCheckbox>;
 };
 

src/components/views/context_menus/SpaceContextMenu.tsx

@@ -0,0 +1,216 @@
+/*
+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, { useContext } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+
+import {
+    IProps as IContextMenuProps,
+} from "../../structures/ContextMenu";
+import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
+import { _t } from "../../../languageHandler";
+import {
+    leaveSpace,
+    shouldShowSpaceSettings,
+    showAddExistingRooms,
+    showCreateNewRoom,
+    showCreateNewSubspace,
+    showSpaceInvite,
+    showSpaceSettings,
+} from "../../../utils/space";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { ButtonEvent } from "../elements/AccessibleButton";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import RoomViewStore from "../../../stores/RoomViewStore";
+import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import { Action } from "../../../dispatcher/actions";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { BetaPill } from "../beta/BetaCard";
+
+interface IProps extends IContextMenuProps {
+    space: Room;
+}
+
+const SpaceContextMenu = ({ space, onFinished, ...props }: IProps) => {
+    const cli = useContext(MatrixClientContext);
+    const userId = cli.getUserId();
+
+    let inviteOption;
+    if (space.getJoinRule() === "public" || space.canInvite(userId)) {
+        const onInviteClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            showSpaceInvite(space);
+            onFinished();
+        };
+
+        inviteOption = (
+            <IconizedContextMenuOption
+                className="mx_SpacePanel_contextMenu_inviteButton"
+                iconClassName="mx_SpacePanel_iconInvite"
+                label={_t("Invite people")}
+                onClick={onInviteClick}
+            />
+        );
+    }
+
+    let settingsOption;
+    let leaveSection;
+    if (shouldShowSpaceSettings(space)) {
+        const onSettingsClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            showSpaceSettings(space);
+            onFinished();
+        };
+
+        settingsOption = (
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconSettings"
+                label={_t("Settings")}
+                onClick={onSettingsClick}
+            />
+        );
+    } else {
+        const onLeaveClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            leaveSpace(space);
+            onFinished();
+        };
+
+        leaveSection = <IconizedContextMenuOptionList red first>
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconLeave"
+                label={_t("Leave space")}
+                onClick={onLeaveClick}
+            />
+        </IconizedContextMenuOptionList>;
+    }
+
+    const canAddRooms = space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
+
+    let newRoomSection;
+    if (space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) {
+        const onNewRoomClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            showCreateNewRoom(space);
+            onFinished();
+        };
+
+        const onAddExistingRoomClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            showAddExistingRooms(space);
+            onFinished();
+        };
+
+        const onNewSubspaceClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            showCreateNewSubspace(space);
+            onFinished();
+        };
+
+        newRoomSection = <IconizedContextMenuOptionList first>
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconPlus"
+                label={_t("Create new room")}
+                onClick={onNewRoomClick}
+            />
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconHash"
+                label={_t("Add existing room")}
+                onClick={onAddExistingRoomClick}
+            />
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconPlus"
+                label={_t("Add space")}
+                onClick={onNewSubspaceClick}
+            >
+                <BetaPill />
+            </IconizedContextMenuOption>
+        </IconizedContextMenuOptionList>;
+    }
+
+    const onMembersClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        if (!RoomViewStore.getRoomId()) {
+            defaultDispatcher.dispatch({
+                action: "view_room",
+                room_id: space.roomId,
+            }, true);
+        }
+
+        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.SpaceMemberList,
+            refireParams: { space: space },
+        });
+        onFinished();
+    };
+
+    const onExploreRoomsClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        defaultDispatcher.dispatch({
+            action: "view_room",
+            room_id: space.roomId,
+        });
+        onFinished();
+    };
+
+    return <IconizedContextMenu
+        {...props}
+        onFinished={onFinished}
+        className="mx_SpacePanel_contextMenu"
+        compact
+    >
+        <div className="mx_SpacePanel_contextMenu_header">
+            { space.name }
+        </div>
+        <IconizedContextMenuOptionList first>
+            { inviteOption }
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconMembers"
+                label={_t("Members")}
+                onClick={onMembersClick}
+            />
+            { settingsOption }
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconExplore"
+                label={canAddRooms ? _t("Manage & explore rooms") : _t("Explore rooms")}
+                onClick={onExploreRoomsClick}
+            />
+        </IconizedContextMenuOptionList>
+        { newRoomSection }
+        { leaveSection }
+    </IconizedContextMenu>;
+};
+
+export default SpaceContextMenu;
+

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -26,6 +26,7 @@ import { replaceableComponent } from "../../../../../utils/replaceableComponent"
 import SettingsFlag from '../../../elements/SettingsFlag';
 import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
 import AccessibleButton from "../../../elements/AccessibleButton";
+import SpaceStore from "../../../../../stores/SpaceStore";
 
 interface IState {
     autoLaunch: boolean;
@@ -47,6 +48,10 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
         'breadcrumbs',
     ];
 
+    static SPACES_SETTINGS = [
+        "Spaces.allRoomsInHome",
+    ];
+
     static KEYBINDINGS_SETTINGS = [
         'ctrlFForSearch',
     ];
@@ -231,6 +236,11 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
                     { this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS) }
                 </div>
 
+                { SpaceStore.spacesEnabled && <div className="mx_SettingsTab_section">
+                    <span className="mx_SettingsTab_subheading">{ _t("Spaces") }</span>
+                    { this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS) }
+                </div> }
+
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{ _t("Keyboard shortcuts") }</span>
                     <AccessibleButton className="mx_SettingsFlag" onClick={KeyboardShortcuts.toggleDialog}>