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

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);
+}