From abf9022fd9ac54e0555fd890853fce356df1b2c1 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 9 Jun 2026 17:17:25 +0200 Subject: [PATCH 01/11] Add primary button icon configuration and set it left arrow in lobby --- src/AppBar.tsx | 41 ++++++++++++++++++++++++++++++++++------- src/room/LobbyView.tsx | 3 +++ 2 files changed, 37 insertions(+), 7 deletions(-) diff --git a/src/AppBar.tsx b/src/AppBar.tsx index 9939f9505..aac28d551 100644 --- a/src/AppBar.tsx +++ b/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> | null, + ) => void; setHidden: (value: boolean) => void; } @@ -53,9 +57,18 @@ export const AppBar: FC = ({ children }) => { const [secondaryButton, setSecondaryButton] = useState( null, ); + const [PrimaryButtonIcon, setPrimaryButtonIcon] = useState + > | 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 = ({ children }) => { - + {PrimaryButtonIcon ? : } @@ -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. diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index cec9f6acd..d1f1a1346 100644 --- a/src/room/LobbyView.tsx +++ b/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 = ({ 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$); From ba1957ef526c1dd315f39af16eff696583b40100 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 9 Jun 2026 18:44:27 +0200 Subject: [PATCH 02/11] tests --- src/AppBar.tsx | 6 ++- .../DeveloperSettingsTab.test.tsx.snap | 40 +++++++++---------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/src/AppBar.tsx b/src/AppBar.tsx index aac28d551..d73130177 100644 --- a/src/AppBar.tsx +++ b/src/AppBar.tsx @@ -85,7 +85,11 @@ export const AppBar: FC = ({ children }) => { - {PrimaryButtonIcon ? : } + {PrimaryButtonIcon ? ( + + ) : ( + + )} diff --git a/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap b/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap index 6159985cd..36e29d806 100644 --- a/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap +++ b/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap @@ -224,13 +224,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
Currently, no overwrite is set. Url from well-known or config is used. @@ -261,13 +261,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = ` MatrixRTC mode
renders and matches snapshot 1`] = `
Compatible with old versions of EC that do not support multi SFU @@ -305,10 +305,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
renders and matches snapshot 1`] = `
Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later) @@ -345,10 +345,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
renders and matches snapshot 1`] = `
Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later From 9b2e1279bc557bb4d62c63dc6ed7b58ef9b148bc Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 11 Jun 2026 09:33:27 +0200 Subject: [PATCH 03/11] Update DeveloperSettingsTab.test.tsx.snap --- .../DeveloperSettingsTab.test.tsx.snap | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap b/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap index 36e29d806..6159985cd 100644 --- a/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap +++ b/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap @@ -224,13 +224,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
Currently, no overwrite is set. Url from well-known or config is used. @@ -261,13 +261,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = ` MatrixRTC mode
renders and matches snapshot 1`] = `
Compatible with old versions of EC that do not support multi SFU @@ -305,10 +305,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
renders and matches snapshot 1`] = `
Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later) @@ -345,10 +345,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
renders and matches snapshot 1`] = `
Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later From 659da15cc2257748ee3a7594c1afc40f8f5ded32 Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 11 Jun 2026 10:39:59 +0200 Subject: [PATCH 04/11] more test coverage --- src/room/LobbyView.test.tsx | 61 +++-- src/room/LobbyView.tsx | 8 +- .../__snapshots__/LobbyView.test.tsx.snap | 243 ++++++++++++++++++ 3 files changed, 296 insertions(+), 16 deletions(-) diff --git a/src/room/LobbyView.test.tsx b/src/room/LobbyView.test.tsx index 487501af7..a84626dd3 100644 --- a/src/room/LobbyView.test.tsx +++ b/src/room/LobbyView.test.tsx @@ -11,6 +11,7 @@ import { BrowserRouter } from "react-router-dom"; import { TooltipProvider } from "@vector-im/compound-web"; import { type MatrixClient } from "matrix-js-sdk"; import { axe } from "vitest-axe"; +import { ArrowLeftIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { LobbyView } from "./LobbyView"; import { E2eeType } from "../e2ee/e2eeType"; @@ -20,6 +21,7 @@ import { type ProcessorState } from "../livekit/TrackProcessorContext"; import { type EncryptionSystem } from "../e2ee/sharedKeyManagement"; import lobbyStyles from "./LobbyView.module.css"; import headerStyles from "../Header.module.css"; +import { AppBar } from "../AppBar"; vi.mock("@livekit/components-react", () => ({ usePreviewTracks: (): unknown[] => [], @@ -60,25 +62,30 @@ const matrixInfo = { function renderLobbyView( props: Partial[0]> = {}, + withAppBar = false, ): ReturnType { const mediaDevices = mockMediaDevices({}); const muteStates = mockMuteStates(); - + const hideHeader = withAppBar ? true : false; + const lobbyView = ( + {}} + confineToRoom={false} + hideHeader={hideHeader} + participantCount={3} + onShareClick={null} + {...props} + /> + ); return render( - {}} - confineToRoom={false} - hideHeader={false} - participantCount={3} - onShareClick={null} - {...props} - /> + {withAppBar && {lobbyView}} + {!withAppBar && lobbyView} , @@ -97,9 +104,10 @@ describe("LobbyView", () => { it("renders without header", () => { const { container } = renderLobbyView({ hideHeader: true }); - expect( - container.getElementsByClassName(headerStyles.header).length, - ).toBeFalsy(); + const els = container.getElementsByClassName(headerStyles.header); + for (const el of els) { + expect(el).not.toBeVisible(); + } }); it("renders with waiting for invite state", () => { @@ -108,4 +116,27 @@ describe("LobbyView", () => { }); expect(getByTestId("lobby_joinCall")).toHaveClass(lobbyStyles.wait); }); + + it("renders with AppBar", async () => { + const { container } = renderLobbyView( + { + waitingForInvite: true, + }, + true, + ); + expect( + container.getElementsByClassName(headerStyles.header).length, + ).toBeTruthy(); + // Check that the primary button uses ArrowLeftIcon (the back/return icon), + // not the default CollapseIcon + const { container: iconContainer } = render(); + const expectedPath = iconContainer.querySelector("path")!.getAttribute("d"); + const primaryButtonPath = container + .querySelector(".leftNav button") + ?.querySelector("path") + ?.getAttribute("d"); + expect(primaryButtonPath).toBe(expectedPath); + expect(container).toMatchSnapshot(); + expect(await axe(container)).toHaveNoViolations(); + }); }); diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index d1f1a1346..6c56c983c 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -52,7 +52,11 @@ 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"; +import { + useAppBarHidden, + useAppBarPrimaryButtonIcon, + useAppBarTitle, +} from "../AppBar"; interface Props { client: MatrixClient; @@ -89,6 +93,8 @@ export const LobbyView: FC = ({ const { t } = useTranslation(); usePageTitle(matrixInfo.roomName); + useAppBarHidden(hideHeader); + useAppBarTitle(matrixInfo.roomName); useAppBarPrimaryButtonIcon(ArrowLeftIcon); const audioEnabled = useBehavior(muteStates.audio.enabled$); const videoEnabled = useBehavior(muteStates.video.enabled$); diff --git a/src/room/__snapshots__/LobbyView.test.tsx.snap b/src/room/__snapshots__/LobbyView.test.tsx.snap index bd6d6ed16..09c86f02e 100644 --- a/src/room/__snapshots__/LobbyView.test.tsx.snap +++ b/src/room/__snapshots__/LobbyView.test.tsx.snap @@ -1,5 +1,248 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`LobbyView > renders with AppBar 1`] = ` +
+ +
+
+
+
+ + Back to recents + +
+
+
+ +
+
+ + + + +
+
+
+
+`; + exports[`LobbyView > renders with header and participant count 1`] = `
Date: Mon, 15 Jun 2026 14:07:44 +0200 Subject: [PATCH 05/11] Update LobbyView.tsx --- src/room/LobbyView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index 6c56c983c..65dd0d68c 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -93,7 +93,7 @@ export const LobbyView: FC = ({ const { t } = useTranslation(); usePageTitle(matrixInfo.roomName); - useAppBarHidden(hideHeader); + useAppBarHidden(false); useAppBarTitle(matrixInfo.roomName); useAppBarPrimaryButtonIcon(ArrowLeftIcon); const audioEnabled = useBehavior(muteStates.audio.enabled$); From db26db266dfd48e50575f07edc701554cd16a7d2 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Jun 2026 14:19:14 +0200 Subject: [PATCH 06/11] update back arrow size --- src/AppBar.tsx | 2 +- src/room/LobbyView.test.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/AppBar.tsx b/src/AppBar.tsx index d73130177..978ca2e67 100644 --- a/src/AppBar.tsx +++ b/src/AppBar.tsx @@ -84,7 +84,7 @@ export const AppBar: FC = ({ children }) => { > - + {PrimaryButtonIcon ? ( ) : ( diff --git a/src/room/LobbyView.test.tsx b/src/room/LobbyView.test.tsx index a84626dd3..d461ffc22 100644 --- a/src/room/LobbyView.test.tsx +++ b/src/room/LobbyView.test.tsx @@ -130,12 +130,14 @@ describe("LobbyView", () => { // Check that the primary button uses ArrowLeftIcon (the back/return icon), // not the default CollapseIcon const { container: iconContainer } = render(); - const expectedPath = iconContainer.querySelector("path")!.getAttribute("d"); - const primaryButtonPath = container + const expectedSvgPath = iconContainer + .querySelector("path")! + .getAttribute("d"); + const primaryButtonSvgPath = container .querySelector(".leftNav button") ?.querySelector("path") ?.getAttribute("d"); - expect(primaryButtonPath).toBe(expectedPath); + expect(primaryButtonSvgPath).toBe(expectedSvgPath); expect(container).toMatchSnapshot(); expect(await axe(container)).toHaveNoViolations(); }); From 164fb99ace43d45636779bceb642b22249259c8d Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Jun 2026 14:42:45 +0200 Subject: [PATCH 07/11] refactor using enum vs jsx node --- src/AppBar.tsx | 47 ++++++++++++++++++++++++++---------------- src/room/LobbyView.tsx | 5 ++--- 2 files changed, 31 insertions(+), 21 deletions(-) diff --git a/src/AppBar.tsx b/src/AppBar.tsx index 978ca2e67..071ad397a 100644 --- a/src/AppBar.tsx +++ b/src/AppBar.tsx @@ -18,7 +18,11 @@ import { type ReactNode, } from "react"; import { Heading, IconButton, Tooltip } from "@vector-im/compound-web"; -import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { + ArrowLeftIcon, + ChevronLeftIcon, + CollapseIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import { useTranslation } from "react-i18next"; import { logger } from "matrix-js-sdk/lib/logger"; @@ -29,9 +33,7 @@ import styles from "./AppBar.module.css"; interface AppBarContext { setTitle: (value: string) => void; setSecondaryButton: (value: ReactNode) => void; - setPrimaryButtonIcon: ( - value: ComponentType> | null, - ) => void; + setPrimaryButtonIconKind: (value: "back" | "minimise") => void; setHidden: (value: boolean) => void; } @@ -57,20 +59,22 @@ export const AppBar: FC = ({ children }) => { const [secondaryButton, setSecondaryButton] = useState( null, ); - const [PrimaryButtonIcon, setPrimaryButtonIcon] = useState - > | null>(null); + const [primaryButtonIcon, setPrimaryButtonIconKind] = useState< + "back" | "minimise" + >("minimise"); const context = useMemo( () => ({ setTitle, setSecondaryButton, setHidden, - setPrimaryButtonIcon, + setPrimaryButtonIconKind, }), - [setTitle, setHidden, setSecondaryButton, setPrimaryButtonIcon], + [setTitle, setHidden, setSecondaryButton, setPrimaryButtonIconKind], ); + const BackIcon = platform === "android" ? ArrowLeftIcon : ChevronLeftIcon; + return ( <>
= ({ children }) => { > - - {PrimaryButtonIcon ? ( - + + {primaryButtonIcon === "back" ? ( + ) : ( )} @@ -128,14 +137,16 @@ export function useAppBarTitle(title: string): void { * 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; +export function useAppBarPrimaryButtonIconKind( + icon: "back" | "minimise", +): void { + const setIconKind = use(AppBarContext)?.setPrimaryButtonIconKind; useEffect(() => { - if (setIcon !== undefined) { - setIcon(icon); - return (): void => setIcon(null); + if (setIconKind !== undefined) { + setIconKind(icon); + return (): void => setIconKind("minimise"); } - }, [setIcon, icon]); + }, [setIconKind, icon]); } /** diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index 65dd0d68c..f4fef5fe9 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -26,7 +26,6 @@ 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"; @@ -54,7 +53,7 @@ import { createLobbyFooterViewModel } from "../components/CallFooterViewModel"; import { type ViewModel } from "../state/ViewModel"; import { useAppBarHidden, - useAppBarPrimaryButtonIcon, + useAppBarPrimaryButtonIconKind, useAppBarTitle, } from "../AppBar"; @@ -95,7 +94,7 @@ export const LobbyView: FC = ({ useAppBarHidden(false); useAppBarTitle(matrixInfo.roomName); - useAppBarPrimaryButtonIcon(ArrowLeftIcon); + useAppBarPrimaryButtonIconKind("back"); const audioEnabled = useBehavior(muteStates.audio.enabled$); const videoEnabled = useBehavior(muteStates.video.enabled$); const toggleAudio = useBehavior(muteStates.audio.toggle$); From b9d769364d9ca3bdad68c1caea8610329370fd8a Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Jun 2026 14:50:50 +0200 Subject: [PATCH 08/11] update tests --- src/AppBar.tsx | 1 - src/room/LobbyView.test.tsx | 43 ++- .../__snapshots__/LobbyView.test.tsx.snap | 259 +++++++++++++++++- 3 files changed, 292 insertions(+), 11 deletions(-) diff --git a/src/AppBar.tsx b/src/AppBar.tsx index 071ad397a..55a1355e1 100644 --- a/src/AppBar.tsx +++ b/src/AppBar.tsx @@ -12,7 +12,6 @@ import { useMemo, useState, createContext, - type ComponentType, type FC, type MouseEvent, type ReactNode, diff --git a/src/room/LobbyView.test.tsx b/src/room/LobbyView.test.tsx index d461ffc22..4131529cd 100644 --- a/src/room/LobbyView.test.tsx +++ b/src/room/LobbyView.test.tsx @@ -11,7 +11,10 @@ import { BrowserRouter } from "react-router-dom"; import { TooltipProvider } from "@vector-im/compound-web"; import { type MatrixClient } from "matrix-js-sdk"; import { axe } from "vitest-axe"; -import { ArrowLeftIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { + ArrowLeftIcon, + ChevronLeftIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import { LobbyView } from "./LobbyView"; import { E2eeType } from "../e2ee/e2eeType"; @@ -49,6 +52,13 @@ const mockClient = { getDeviceId: () => "DEVICE", } as Partial as MatrixClient; +const platformMock = vi.hoisted(() => vi.fn(() => "desktop")); +vi.mock("../Platform", () => ({ + get platform(): string { + return platformMock(); + }, +})); + const matrixInfo = { userId: "@user:example.org", displayName: "Test User", @@ -63,7 +73,9 @@ const matrixInfo = { function renderLobbyView( props: Partial[0]> = {}, withAppBar = false, + platform = "android", ): ReturnType { + platformMock.mockReturnValue(platform); const mediaDevices = mockMediaDevices({}); const muteStates = mockMuteStates(); const hideHeader = withAppBar ? true : false; @@ -117,12 +129,13 @@ describe("LobbyView", () => { expect(getByTestId("lobby_joinCall")).toHaveClass(lobbyStyles.wait); }); - it("renders with AppBar", async () => { + it("renders with AppBar android", async () => { const { container } = renderLobbyView( { waitingForInvite: true, }, true, + "android", ); expect( container.getElementsByClassName(headerStyles.header).length, @@ -141,4 +154,30 @@ describe("LobbyView", () => { expect(container).toMatchSnapshot(); expect(await axe(container)).toHaveNoViolations(); }); + + it("renders with AppBar ios", async () => { + const { container } = renderLobbyView( + { + waitingForInvite: true, + }, + true, + "ios", + ); + expect( + container.getElementsByClassName(headerStyles.header).length, + ).toBeTruthy(); + // Check that the primary button uses ArrowLeftIcon (the back/return icon), + // not the default CollapseIcon + const { container: iconContainer } = render(); + const expectedSvgPath = iconContainer + .querySelector("path")! + .getAttribute("d"); + const primaryButtonSvgPath = container + .querySelector(".leftNav button") + ?.querySelector("path") + ?.getAttribute("d"); + expect(primaryButtonSvgPath).toBe(expectedSvgPath); + expect(container).toMatchSnapshot(); + expect(await axe(container)).toHaveNoViolations(); + }); }); diff --git a/src/room/__snapshots__/LobbyView.test.tsx.snap b/src/room/__snapshots__/LobbyView.test.tsx.snap index 09c86f02e..17df4aabf 100644 --- a/src/room/__snapshots__/LobbyView.test.tsx.snap +++ b/src/room/__snapshots__/LobbyView.test.tsx.snap @@ -1,10 +1,10 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`LobbyView > renders with AppBar 1`] = ` +exports[`LobbyView > renders with AppBar android 1`] = `
@@ -161,7 +161,7 @@ exports[`LobbyView > renders with AppBar 1`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -243,6 +243,249 @@ exports[`LobbyView > renders with AppBar 1`] = `
`; +exports[`LobbyView > renders with AppBar ios 1`] = ` +
+
+
+
+ +
+

+ Test Room +

+
+
+
+
+
+
+
+ + Back to recents + +
+
+
+ +
+
+ + + + +
+
+
+
+`; + exports[`LobbyView > renders with header and participant count 1`] = `
renders with header and participant count 1`] = ` xmlns="http://www.w3.org/2000/svg" >
@@ -542,7 +785,7 @@ exports[`LobbyView > renders with header and participant count 1`] = ` xmlns="http://www.w3.org/2000/svg" > From b31825d05b7d42774e3cebdfeffde9baa11751a1 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 16 Jun 2026 16:54:14 +0200 Subject: [PATCH 09/11] review --- src/room/LobbyView.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index f4fef5fe9..48a477635 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -51,11 +51,7 @@ import { CallFooter, type FooterSnapshot } from "../components/CallFooter"; import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts"; import { createLobbyFooterViewModel } from "../components/CallFooterViewModel"; import { type ViewModel } from "../state/ViewModel"; -import { - useAppBarHidden, - useAppBarPrimaryButtonIconKind, - useAppBarTitle, -} from "../AppBar"; +import { useAppBarPrimaryButtonIconKind } from "../AppBar"; interface Props { client: MatrixClient; @@ -92,8 +88,6 @@ export const LobbyView: FC = ({ const { t } = useTranslation(); usePageTitle(matrixInfo.roomName); - useAppBarHidden(false); - useAppBarTitle(matrixInfo.roomName); useAppBarPrimaryButtonIconKind("back"); const audioEnabled = useBehavior(muteStates.audio.enabled$); const videoEnabled = useBehavior(muteStates.video.enabled$); From 19fd7f42b1dd73a87a0c8c31b50402f53faf035b Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 17 Jun 2026 16:35:09 +0200 Subject: [PATCH 10/11] I cannot belive GH... Does this commit fix the processing situation? --- src/room/LobbyView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index 48a477635..e122b3f26 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -86,8 +86,8 @@ export const LobbyView: FC = ({ }, []); const { t } = useTranslation(); - usePageTitle(matrixInfo.roomName); + usePageTitle(matrixInfo.roomName); useAppBarPrimaryButtonIconKind("back"); const audioEnabled = useBehavior(muteStates.audio.enabled$); const videoEnabled = useBehavior(muteStates.video.enabled$); From 049c432fc3cb6c261080b6a4b7c5c7143de4a84e Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 17 Jun 2026 18:48:26 +0200 Subject: [PATCH 11/11] update comment + fix tests --- src/AppBar.tsx | 4 ++-- src/room/__snapshots__/LobbyView.test.tsx.snap | 10 ---------- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/src/AppBar.tsx b/src/AppBar.tsx index 55a1355e1..490acf065 100644 --- a/src/AppBar.tsx +++ b/src/AppBar.tsx @@ -133,8 +133,8 @@ export function useAppBarTitle(title: string): void { } /** - * 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. + * React hook which sets the primary button icon kind. Can only be "minimise" or "back" + * It is an error to call this hook from multiple sites in the same component tree. */ export function useAppBarPrimaryButtonIconKind( icon: "back" | "minimise", diff --git a/src/room/__snapshots__/LobbyView.test.tsx.snap b/src/room/__snapshots__/LobbyView.test.tsx.snap index 17df4aabf..e19c3477f 100644 --- a/src/room/__snapshots__/LobbyView.test.tsx.snap +++ b/src/room/__snapshots__/LobbyView.test.tsx.snap @@ -39,11 +39,6 @@ exports[`LobbyView > renders with AppBar android 1`] = `
-

- Test Room -

@@ -282,11 +277,6 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
-

- Test Room -