Style room header icons and facepile for toggled state (#28968)

* Fix tiny typo in existing code

* Create a hook that uses the right panel store

So that we track changes to the right panel phases

* Create a context that wraps the previous hook we created

We do this so that we can get by using a single event listener i.e we
only need to call `useCurrentPhase` in the provider as opposed to
calling it in each header icon.

* Create a hook that tells you if a panel is open or not

* Create component that wraps Icon

and adds a class name when the corresponding panel is open

* Style room header icons for when they are toggled

* Style face pile for toggle state

* Fix broken CI

* Give directory a better name

* Update year in license

* Use a stronger type

Author: MidhunSureshR

res/css/views/rooms/_RoomHeader.pcss

@@ -71,6 +71,7 @@ Please see LICENSE files in the repository root for full details.
     padding: var(--cpd-space-1-5x);
     cursor: pointer;
     user-select: none;
+    font: var(--cpd-font-body-sm-medium);
 
     /* RoomAvatar doesn't pass classes down to avatar
     So set style here
@@ -83,6 +84,12 @@ Please see LICENSE files in the repository root for full details.
         color: $primary-content;
         background: var(--cpd-color-bg-subtle-primary);
     }
+
+    &.mx_FacePile_toggled {
+        background: var(--cpd-color-bg-success-subtle);
+        color: var(--cpd-color-text-action-accent);
+        font: var(--cpd-font-body-sm-semibold);
+    }
 }
 
 .mx_RoomHeader .mx_BaseAvatar {
@@ -93,3 +100,7 @@ Please see LICENSE files in the repository root for full details.
     /* Workaround for https://github.com/element-hq/compound/issues/331 */
     min-width: 240px;
 }
+
+.mx_RoomHeader .mx_RoomHeader_toggled {
+    color: var(--cpd-color-icon-accent-primary);
+}

src/components/structures/RoomView.tsx

@@ -66,7 +66,7 @@ import RoomPreviewBar from "../views/rooms/RoomPreviewBar";
 import RoomPreviewCard from "../views/rooms/RoomPreviewCard";
 import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar";
 import AuxPanel from "../views/rooms/AuxPanel";
-import RoomHeader from "../views/rooms/RoomHeader";
+import RoomHeader from "../views/rooms/RoomHeader/RoomHeader";
 import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import EffectsOverlay from "../views/elements/EffectsOverlay";
 import { containsEmoji } from "../../effects/utils";

src/components/structures/WaitingForThirdPartyRoomView.tsx

@@ -11,7 +11,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import ErrorBoundary from "../views/elements/ErrorBoundary";
-import RoomHeader from "../views/rooms/RoomHeader";
+import RoomHeader from "../views/rooms/RoomHeader/RoomHeader.tsx";
 import ScrollPanel from "./ScrollPanel";
 import EventTileBubble from "../views/messages/EventTileBubble";
 import NewRoomIntro from "../views/rooms/NewRoomIntro";

src/components/views/elements/FacePile.tsx

@@ -9,9 +9,12 @@ Please see LICENSE files in the repository root for full details.
 import React, { FC, HTMLAttributes, ReactNode } from "react";
 import { RoomMember } from "matrix-js-sdk/src/matrix";
 import { AvatarStack, Tooltip } from "@vector-im/compound-web";
+import classNames from "classnames";
 
 import MemberAvatar from "../avatars/MemberAvatar";
 import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
+import { useToggled } from "../rooms/RoomHeader/toggle/useToggled";
+import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 
 interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     members: RoomMember[];
@@ -57,8 +60,14 @@ const FacePile: FC<IProps> = ({
         </>
     );
 
+    const toggled = useToggled(RightPanelPhases.MemberList);
+    const classes = classNames({
+        mx_FacePile: true,
+        mx_FacePile_toggled: toggled,
+    });
+
     const content = (
-        <AccessibleButton {...props} className="mx_FacePile" onClick={onClick ?? null}>
+        <AccessibleButton {...props} className={classes} onClick={onClick ?? null}>
             <AvatarStack>{pileContents}</AvatarStack>
             {children}
         </AccessibleButton>