From c327dc33bf91c85453ab5a2d5149fb1035f6a122 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Fri, 1 Sep 2023 14:37:47 +0100
Subject: [PATCH 1/3] Prevent event propagation when clicking icon buttons

---
 src/components/views/rooms/RoomHeader.tsx | 78 +++++++++++++----------
 1 file changed, 45 insertions(+), 33 deletions(-)

diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index cdfd6d833dc..614f16b6eec 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -175,43 +175,55 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
             </Box>
             <Flex as="nav" align="center" gap="var(--cpd-space-2x)">
                 {!useElementCallExclusively && (
+                    <Tooltip label={!voiceCallDisabledReason ? _t("Voice call") : voiceCallDisabledReason!}>
+                        <IconButton
+                            disabled={!!voiceCallDisabledReason}
+                            title={!voiceCallDisabledReason ? _t("Voice call") : voiceCallDisabledReason!}
+                            onClick={(evt) => {
+                                evt.stopPropagation();
+                                placeCall(room, CallType.Voice, voiceCallType);
+                            }}
+                        >
+                            <VoiceCallIcon />
+                        </IconButton>
+                    </Tooltip>
+                )}
+                <Tooltip label={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!}>
                     <IconButton
-                        disabled={!!voiceCallDisabledReason}
-                        title={!voiceCallDisabledReason ? _t("Voice call") : voiceCallDisabledReason!}
-                        onClick={() => {
-                            placeCall(room, CallType.Voice, voiceCallType);
+                        disabled={!!videoCallDisabledReason}
+                        title={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!}
+                        onClick={(evt) => {
+                            evt.stopPropagation();
+                            placeCall(room, CallType.Video, videoCallType);
                         }}
                     >
-                        <VoiceCallIcon />
+                        <VideoCallIcon />
                     </IconButton>
-                )}
-                <IconButton
-                    disabled={!!videoCallDisabledReason}
-                    title={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!}
-                    onClick={() => {
-                        placeCall(room, CallType.Video, videoCallType);
-                    }}
-                >
-                    <VideoCallIcon />
-                </IconButton>
-                <IconButton
-                    indicator={notificationColorToIndicator(threadNotifications)}
-                    onClick={() => {
-                        showOrHidePanel(RightPanelPhases.ThreadPanel);
-                    }}
-                    title={_t("common|threads")}
-                >
-                    <ThreadsIcon />
-                </IconButton>
-                <IconButton
-                    indicator={notificationColorToIndicator(globalNotificationState.color)}
-                    onClick={() => {
-                        showOrHidePanel(RightPanelPhases.NotificationPanel);
-                    }}
-                    title={_t("Notifications")}
-                >
-                    <NotificationsIcon />
-                </IconButton>
+                </Tooltip>
+                <Tooltip label={_t("common|threads")}>
+                    <IconButton
+                        indicator={notificationColorToIndicator(threadNotifications)}
+                        onClick={(evt) => {
+                            evt.stopPropagation();
+                            showOrHidePanel(RightPanelPhases.ThreadPanel);
+                        }}
+                        title={_t("common|threads")}
+                    >
+                        <ThreadsIcon />
+                    </IconButton>
+                </Tooltip>
+                <Tooltip label={_t("Notifications")}>
+                    <IconButton
+                        indicator={notificationColorToIndicator(globalNotificationState.color)}
+                        onClick={(evt) => {
+                            evt.stopPropagation();
+                            showOrHidePanel(RightPanelPhases.NotificationPanel);
+                        }}
+                        title={_t("Notifications")}
+                    >
+                        <NotificationsIcon />
+                    </IconButton>
+                </Tooltip>
             </Flex>
             {!isDirectMessage && (
                 <BodyText

From 3ca8619343e4355a6cd958424cfb93fcd926f7a3 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Fri, 1 Sep 2023 14:40:50 +0100
Subject: [PATCH 2/3] Inhibit view user on click behaviour for room header face
 pile

---
 src/components/views/elements/FacePile.tsx | 19 +++++++++++++++++--
 src/components/views/rooms/RoomHeader.tsx  |  1 +
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx
index 47c05598ba7..ab71cff7cbe 100644
--- a/src/components/views/elements/FacePile.tsx
+++ b/src/components/views/elements/FacePile.tsx
@@ -27,15 +27,30 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
     tooltipLabel?: string;
     tooltipShortcut?: string;
     children?: ReactNode;
+    viewUserOnClick?: boolean;
 }
 
-const FacePile: FC<IProps> = ({ members, size, overflow, tooltipLabel, tooltipShortcut, children, ...props }) => {
+const FacePile: FC<IProps> = ({
+    members,
+    size,
+    overflow,
+    tooltipLabel,
+    tooltipShortcut,
+    children,
+    viewUserOnClick = true,
+    ...props
+}) => {
     const faces = members.map(
         tooltipLabel
             ? (m) => <MemberAvatar key={m.userId} member={m} size={size} hideTitle />
             : (m) => (
                   <Tooltip key={m.userId} label={m.name} shortcut={tooltipShortcut}>
-                      <MemberAvatar member={m} size={size} viewUserOnClick={!props.onClick} hideTitle />
+                      <MemberAvatar
+                          member={m}
+                          size={size}
+                          viewUserOnClick={!props.onClick && viewUserOnClick}
+                          hideTitle
+                      />
                   </Tooltip>
               ),
     );
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 614f16b6eec..78d3f8139f3 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -241,6 +241,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                         members={members.slice(0, 3)}
                         size="20px"
                         overflow={false}
+                        viewUserOnClick={false}
                     >
                         {formatCount(memberCount)}
                     </FacePile>

From 5ed2a225a893082c4b857910a2fcc6b68e24f748 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Fri, 1 Sep 2023 14:48:04 +0100
Subject: [PATCH 3/3] Update snapshot

---
 .../views/rooms/__snapshots__/RoomHeader-test.tsx.snap        | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
index d1ddaeeb429..c501271b371 100644
--- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
@@ -37,6 +37,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
     >
       <button
         class="_icon-button_1k9cw_17"
+        data-state="closed"
         disabled=""
         style="--cpd-icon-button-size: 32px;"
         title="There's no one here to call"
@@ -45,6 +46,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
       </button>
       <button
         class="_icon-button_1k9cw_17"
+        data-state="closed"
         disabled=""
         style="--cpd-icon-button-size: 32px;"
         title="There's no one here to call"
@@ -53,6 +55,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
       </button>
       <button
         class="_icon-button_1k9cw_17"
+        data-state="closed"
         style="--cpd-icon-button-size: 32px;"
         title="Threads"
       >
@@ -60,6 +63,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
       </button>
       <button
         class="_icon-button_1k9cw_17"
+        data-state="closed"
         style="--cpd-icon-button-size: 32px;"
         title="Notifications"
       >