Add tabs to the right panel (#12672)

* Create new method for header button behaviour

With the introduction of tabs, the behaviour of the header buttons is
changed as follows:
- Close any right panel if open
- Open the correct right panel if no panel was open before

The old method (and behaviour) is retained as showOrHidePhase.

* Implement tabs in the right panel

There are three tabs: Info, People and Threads

* Remove unwanted code from RoomSummaryCard

- Remove the menu item for opening the memberlist since that is now
  taken of by the tabs.
- Remove the close button

* Remove code for focusing close button from tac item

See https://github.com/matrix-org/matrix-react-sdk/pull/12410

There's no longer a close button to focus so we instead focus the thread
tab. This is done in RightPaneltabs.tsx so we just need to remove this
code.

* Introduce a room info icon to the header

This was previously present in the legacy room header but not in the new
header.

* BaseCard changes

- Adds id, ariaLabelledBy and role props to implement tab accessibility.
- Adds hideHeaderButtons prop to hide header buttons (think back and
  close buttons).
- Change confusing header rendering code:
  header is not rendered ONLY when no header is passed AND
  hideHeaderButtons is true.

* Refactor repeated code into function

Created a new function createSpaceScopeHeader which returns the
component if the room is a space room. Previously this code was
duplicated in every component that uses SpaceScopeHeader component.

* Pass BaseCard attributes and use helper function

Actually using the code from the last two commits

* Add, update and remove tests/screenshots/snapshots

* Fix distance between search bar and tabs

* Update compound

* Update screenshots/snapshots

src/components/views/rooms/MemberList.tsx

@@ -55,7 +55,7 @@ import { SDKContext } from "../../../contexts/SDKContext";
 import { canInviteTo } from "../../../utils/room/canInviteTo";
 import { inviteToRoom } from "../../../utils/room/inviteToRoom";
 import { Action } from "../../../dispatcher/actions";
-import { SpaceScopeHeader } from "./SpaceScopeHeader";
+import { createSpaceScopeHeader } from "./SpaceScopeHeader";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -64,6 +64,7 @@ const SHOW_MORE_INCREMENT = 100;
 interface IProps {
     roomId: string;
     searchQuery: string;
+    hideHeaderButtons?: boolean;
     onClose(): void;
     onSearchQueryChanged: (query: string) => void;
 }
@@ -358,7 +359,14 @@ export default class MemberList extends React.Component<IProps, IState> {
     public render(): React.ReactNode {
         if (this.state.loading) {
             return (
-                <BaseCard className="mx_MemberList" onClose={this.props.onClose}>
+                <BaseCard
+                    id="memberlist-panel"
+                    className="mx_MemberList"
+                    ariaLabelledBy="memberlist-panel-tab"
+                    role="tabpanel"
+                    hideHeaderButtons={this.props.hideHeaderButtons}
+                    onClose={this.props.onClose}
+                >
                     <Spinner />
                 </BaseCard>
             );
@@ -415,12 +423,14 @@ export default class MemberList extends React.Component<IProps, IState> {
             />
         );
 
-        const scopeHeader = room ? <SpaceScopeHeader room={room} /> : undefined;
-
         return (
             <BaseCard
+                id="memberlist-panel"
                 className="mx_MemberList"
-                header={<React.Fragment>{scopeHeader}</React.Fragment>}
+                ariaLabelledBy="memberlist-panel-tab"
+                role="tabpanel"
+                header={createSpaceScopeHeader(room)}
+                hideHeaderButtons={this.props.hideHeaderButtons}
                 footer={footer}
                 onClose={this.props.onClose}
             >

src/components/views/rooms/RoomHeader.tsx

@@ -20,6 +20,7 @@ import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/v
 import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg";
 import { Icon as CloseCallIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
 import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
+import { Icon as RoomInfoIcon } from "@vector-im/compound-design-tokens/icons/info-solid.svg";
 import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
 import { Icon as VerifiedIcon } from "@vector-im/compound-design-tokens/icons/verified.svg";
 import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
@@ -336,6 +337,17 @@ export default function RoomHeader({
                         </>
                     )}
 
+                    <Tooltip label={_t("right_panel|room_summary_card|title")}>
+                        <IconButton
+                            onClick={(evt) => {
+                                evt.stopPropagation();
+                                RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
+                            }}
+                            aria-label={_t("right_panel|room_summary_card|title")}
+                        >
+                            <RoomInfoIcon />
+                        </IconButton>
+                    </Tooltip>
                     <Tooltip label={_t("common|threads")}>
                         <IconButton
                             indicator={notificationLevelToIndicator(threadNotifications)}

src/components/views/rooms/SpaceScopeHeader.tsx

@@ -21,18 +21,23 @@ import { Text } from "@vector-im/compound-web";
 import RoomAvatar from "../avatars/RoomAvatar";
 import { useRoomName } from "../../../hooks/useRoomName";
 
+/**
+ * Returns a space scope header if needed
+ * @param room The room object
+ * @returns rendered component if the room is a space room, otherwise returns null
+ */
+export function createSpaceScopeHeader(room?: Room | null): React.JSX.Element | null {
+    if (room?.isSpaceRoom()) return <SpaceScopeHeader room={room} />;
+    else return null;
+}
+
 /**
  * Scope header used to decorate right panels that are scoped to a space.
- * When room is not a space renders nothing.
- * Otherwise renders room avatar and name.
+ * It renders room avatar and name.
  */
 export const SpaceScopeHeader: React.FC<{ room: Room }> = ({ room }) => {
     const roomName = useRoomName(room);
 
-    if (!room.isSpaceRoom()) {
-        return null;
-    }
-
     return (
         <Text
             as="div"

src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -28,7 +28,7 @@ import { Action } from "../../../dispatcher/actions";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import BaseCard from "../right_panel/BaseCard";
 import { Flex } from "../../utils/Flex";
-import { SpaceScopeHeader } from "./SpaceScopeHeader";
+import { createSpaceScopeHeader } from "./SpaceScopeHeader";
 
 interface IProps {
     event: MatrixEvent;
@@ -133,10 +133,8 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
             );
         }
 
-        const scopeHeader: JSX.Element | undefined = this.room ? <SpaceScopeHeader room={this.room} /> : undefined;
-
         return (
-            <BaseCard header={scopeHeader} onClose={this.props.onClose}>
+            <BaseCard header={createSpaceScopeHeader(this.room)} onClose={this.props.onClose}>
                 <Flex className="mx_ThirdPartyMemberInfo" direction="column" gap="var(--cpd-space-4x)">
                     <Flex direction="column" as="section" justify="start" gap="var(--cpd-space-2x)">
                         {/* same as userinfo name style */}