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

src/contexts/CurrentRightPanelPhaseContext.tsx

@@ -0,0 +1,34 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { createContext } from "react";
+
+import { useCurrentPhase } from "../hooks/right-panel/useCurrentPhase";
+import { RightPanelPhases } from "../stores/right-panel/RightPanelStorePhases";
+
+type Context = {
+    isPanelOpen: boolean;
+    currentPhase: RightPanelPhases | null;
+};
+
+export const CurrentRightPanelPhaseContext = createContext<Context | null>(null);
+
+type Props = {
+    roomId: string;
+};
+
+export const CurrentRightPanelPhaseContextProvider: React.FC<React.PropsWithChildren<Props>> = ({
+    roomId,
+    children,
+}) => {
+    const { currentPhase, isOpen } = useCurrentPhase(roomId);
+    return (
+        <CurrentRightPanelPhaseContext.Provider value={{ currentPhase, isPanelOpen: isOpen }}>
+            {children}
+        </CurrentRightPanelPhaseContext.Provider>
+    );
+};