Add primary button icon configuration and set it left arrow in lobby

src/AppBar.tsx

@@ -6,15 +6,16 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  createContext,
-  type FC,
-  type MouseEvent,
-  type ReactNode,
   use,
   useCallback,
   useEffect,
   useMemo,
   useState,
+  createContext,
+  type ComponentType,
+  type FC,
+  type MouseEvent,
+  type ReactNode,
 } from "react";
 import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
 import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -28,6 +29,9 @@ import styles from "./AppBar.module.css";
 interface AppBarContext {
   setTitle: (value: string) => void;
   setSecondaryButton: (value: ReactNode) => void;
+  setPrimaryButtonIcon: (
+    value: ComponentType<React.SVGAttributes<SVGElement>> | null,
+  ) => void;
   setHidden: (value: boolean) => void;
 }
 
@@ -53,9 +57,18 @@ export const AppBar: FC<Props> = ({ children }) => {
   const [secondaryButton, setSecondaryButton] = useState<ReactNode | null>(
     null,
   );
+  const [PrimaryButtonIcon, setPrimaryButtonIcon] = useState<ComponentType<
+    React.SVGAttributes<SVGElement>
+  > | null>(null);
+
   const context = useMemo(
-    () => ({ setTitle, setSecondaryButton, setHidden }),
-    [setTitle, setHidden, setSecondaryButton],
+    () => ({
+      setTitle,
+      setSecondaryButton,
+      setHidden,
+      setPrimaryButtonIcon,
+    }),
+    [setTitle, setHidden, setSecondaryButton, setPrimaryButtonIcon],
   );
 
   return (
@@ -72,7 +85,7 @@ export const AppBar: FC<Props> = ({ children }) => {
           <LeftNav>
             <Tooltip label={t("common.back")}>
               <IconButton size="24px" onClick={onBackClick}>
-                <CollapseIcon aria-hidden />
+                {PrimaryButtonIcon ? <PrimaryButtonIcon /> : <CollapseIcon />}
               </IconButton>
             </Tooltip>
           </LeftNav>
@@ -107,6 +120,20 @@ export function useAppBarTitle(title: string): void {
   }, [title, setTitle]);
 }
 
+/**
+ * React hook which sets the title to be shown in the app bar, if present. It is
+ * an error to call this hook from multiple sites in the same component tree.
+ */
+export function useAppBarPrimaryButtonIcon(icon: typeof CollapseIcon): void {
+  const setIcon = use(AppBarContext)?.setPrimaryButtonIcon;
+  useEffect(() => {
+    if (setIcon !== undefined) {
+      setIcon(icon);
+      return (): void => setIcon(null);
+    }
+  }, [setIcon, icon]);
+}
+
 /**
  * React hook which sets the title to be shown in the app bar, if present. It is
  * an error to call this hook from multiple sites in the same component tree.

src/room/LobbyView.tsx

@@ -26,6 +26,7 @@ import {
 } from "livekit-client";
 import { useObservableEagerState } from "observable-hooks";
 import { useNavigate } from "react-router-dom";
+import { ArrowLeftIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
@@ -51,6 +52,7 @@ import { CallFooter, type FooterSnapshot } from "../components/CallFooter";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { createLobbyFooterViewModel } from "../components/CallFooterViewModel";
 import { type ViewModel } from "../state/ViewModel";
+import { useAppBarPrimaryButtonIcon } from "../AppBar";
 
 interface Props {
   client: MatrixClient;
@@ -87,6 +89,7 @@ export const LobbyView: FC<Props> = ({
   const { t } = useTranslation();
   usePageTitle(matrixInfo.roomName);
 
+  useAppBarPrimaryButtonIcon(ArrowLeftIcon);
   const audioEnabled = useBehavior(muteStates.audio.enabled$);
   const videoEnabled = useBehavior(muteStates.video.enabled$);
   const toggleAudio = useBehavior(muteStates.audio.toggle$);