diff --git a/res/css/views/rooms/RoomListView/_RoomListSearch.pcss b/res/css/views/rooms/RoomListView/_RoomListSearch.pcss index e6bd492466..f175ab3976 100644 --- a/res/css/views/rooms/RoomListView/_RoomListSearch.pcss +++ b/res/css/views/rooms/RoomListView/_RoomListSearch.pcss @@ -31,7 +31,7 @@ } } - .mx_RoomListSearch_explore:hover { + .mx_RoomListSearch_button:hover { svg { fill: var(--cpd-color-icon-primary); } diff --git a/src/components/views/rooms/RoomListView/RoomListSearch.tsx b/src/components/views/rooms/RoomListView/RoomListSearch.tsx index 415e817ad9..6809841075 100644 --- a/src/components/views/rooms/RoomListView/RoomListSearch.tsx +++ b/src/components/views/rooms/RoomListView/RoomListSearch.tsx @@ -9,6 +9,7 @@ import React, { type JSX } from "react"; import { Button } from "@vector-im/compound-web"; import ExploreIcon from "@vector-im/compound-design-tokens/assets/web/icons/explore"; import SearchIcon from "@vector-im/compound-design-tokens/assets/web/icons/search"; +import DialPadIcon from "@vector-im/compound-design-tokens/assets/web/icons/dial-pad"; import { IS_MAC, Key } from "../../../../Keyboard"; import { _t } from "../../../../languageHandler"; @@ -20,6 +21,8 @@ import { Action } from "../../../../dispatcher/actions"; import PosthogTrackers from "../../../../PosthogTrackers"; import defaultDispatcher from "../../../../dispatcher/dispatcher"; import { Flex } from "../../../utils/Flex"; +import { useTypedEventEmitterState } from "../../../../hooks/useEventEmitter"; +import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../../LegacyCallHandler"; type RoomListSearchProps = { /** @@ -35,6 +38,12 @@ type RoomListSearchProps = { */ export function RoomListSearch({ activeSpace }: RoomListSearchProps): JSX.Element { const displayExploreButton = activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms); + // We only display the dial button if the user is can make PSTN calls + const displayDialButton = useTypedEventEmitterState( + LegacyCallHandler.instance, + LegacyCallHandlerEvent.ProtocolSupport, + () => LegacyCallHandler.instance.getSupportsPstnProtocol(), + ); return ( @@ -50,9 +59,22 @@ export function RoomListSearch({ activeSpace }: RoomListSearchProps): JSX.Elemen {IS_MAC ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K"} + {displayDialButton && ( + + + +`; + +exports[` should display the dial button when the PTSN protocol is not supported 1`] = ` + +