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/hooks/right-panel/useCurrentPhase.ts

@@ -0,0 +1,45 @@
+/*
+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 { useContext, useState } from "react";
+
+import { SDKContext } from "../../contexts/SDKContext";
+import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
+import { useEventEmitter } from "../useEventEmitter";
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
+
+/**
+ * Returns:
+ * - state which will always reflect the currently active right panel phase or null.
+ * - boolean state representing whether any panel is open or not.
+ * @param roomId room id if available.
+ */
+export function useCurrentPhase(roomId?: string): { currentPhase: RightPanelPhases | null; isOpen: boolean } {
+    const sdkContext = useContext(SDKContext);
+
+    const getCurrentPhase = (): RightPanelPhases | null => {
+        const card = roomId
+            ? sdkContext.rightPanelStore.currentCardForRoom(roomId)
+            : sdkContext.rightPanelStore.currentCard;
+        return card.phase;
+    };
+
+    const getIsOpen = (): boolean => {
+        const isOpen = roomId ? sdkContext.rightPanelStore.isOpenForRoom(roomId) : sdkContext.rightPanelStore.isOpen;
+        return isOpen;
+    };
+
+    const [currentPhase, setCurrentPhase] = useState<RightPanelPhases | null>(getCurrentPhase());
+    const [isOpen, setIsOpen] = useState<boolean>(getIsOpen());
+
+    useEventEmitter(sdkContext.rightPanelStore, UPDATE_EVENT, () => {
+        setCurrentPhase(getCurrentPhase());
+        setIsOpen(getIsOpen());
+    });
+
+    return { currentPhase, isOpen };
+}