Merge pull request #33764 from element-hq/dbkr/withpresence_use_new_component

Make presence icons & colours consistent throughout the app

apps/web/src/components/views/avatars/WithPresenceIndicator.tsx

@@ -15,43 +15,28 @@ import {
     type User,
     UserEvent,
 } from "matrix-js-sdk/src/matrix";
-import { Tooltip } from "@vector-im/compound-web";
 
 import { isPresenceEnabled } from "../../../utils/presence";
-import { _t } from "../../../languageHandler";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { getJoinedNonFunctionalMembers } from "../../../utils/room/getJoinedNonFunctionalMembers";
 import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import { BUSY_PRESENCE_NAME } from "../rooms/PresenceLabel";
+import AvatarPresenceIconView from "../rooms/MemberList/tiles/common/PresenceIconView";
 
 interface Props {
     room: Room;
-    size: string; // CSS size
-    tooltipProps?: {
-        tabIndex?: number;
-    };
     children: ReactNode;
 }
 
 export enum Presence {
-    // Note: the names here are used in CSS class names
-    Online = "ONLINE",
-    Away = "AWAY",
-    Offline = "OFFLINE",
-    Busy = "BUSY",
-}
-
-function tooltipText(variant: Presence): string {
-    switch (variant) {
-        case Presence.Online:
-            return _t("presence|online");
-        case Presence.Away:
-            return _t("presence|away");
-        case Presence.Offline:
-            return _t("presence|offline");
-        case Presence.Busy:
-            return _t("presence|busy");
-    }
+    // This class used to have its own presence indicator and has been
+    // updated to use the new one so presence colours / icons match across the app.
+    // These values are the ones from the wire that PresenceIconView expects,
+    // but really some of the logic here could be deduplicated.
+    Online = "online",
+    Away = "unavailable",
+    Offline = "offline",
+    Busy = "busy",
 }
 
 function getDmMember(room: Room): RoomMember | null {
@@ -117,22 +102,13 @@ export const usePresence = (room: Room, member: RoomMember | null): Presence | n
     return presence;
 };
 
-const WithPresenceIndicator: React.FC<Props> = ({ room, size, tooltipProps, children }) => {
+const WithPresenceIndicator: React.FC<Props> = ({ room, children }) => {
     const dmMember = useDmMember(room);
     const presence = usePresence(room, dmMember);
 
     let icon: JSX.Element | undefined;
     if (presence) {
-        icon = (
-            <div
-                tabIndex={tooltipProps?.tabIndex ?? 0}
-                className={`mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_${presence.toLowerCase()}`}
-                style={{
-                    width: size,
-                    height: size,
-                }}
-            />
-        );
+        icon = <AvatarPresenceIconView presenceState={presence} />;
     }
 
     if (!presence) return <>{children}</>;
@@ -140,9 +116,7 @@ const WithPresenceIndicator: React.FC<Props> = ({ room, size, tooltipProps, chil
     return (
         <div className="mx_WithPresenceIndicator">
             {children}
-            <Tooltip label={tooltipText(presence)} placement="bottom">
-                {icon}
-            </Tooltip>
+            <div className="mx_WithPresenceIndicator_icon">{icon}</div>
         </div>
     );
 };

apps/web/src/components/views/rooms/MemberList/tiles/common/MemberTileView.tsx

@@ -51,7 +51,8 @@ export function MemberTileView(props: Props): JSX.Element {
             >
                 <div aria-hidden className="mx_MemberTileView_left">
                     <div className="mx_MemberTileView_avatar">
-                        {props.avatarJsx} {props.presenceJsx}
+                        {props.avatarJsx}
+                        <div className="mx_MemberTileView_presence">{props.presenceJsx}</div>
                     </div>
                     <div className="mx_MemberTileView_name">{props.nameJsx}</div>
                 </div>

apps/web/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx

@@ -6,12 +6,15 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX } from "react";
+import classNames from "classnames";
 import OnlineOrUnavailableIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-solid-8x8";
 import OfflineIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-outline-8x8";
 import DNDIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-strikethrough-8x8";
-import classNames from "classnames";
+import { Tooltip } from "@vector-im/compound-web";
 import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
 
+import { _t } from "../../../../../../languageHandler";
+
 interface Props {
     className?: string;
     presenceState: string;
@@ -36,9 +39,30 @@ function getIconForPresenceState(state: string): JSX.Element {
     }
 }
 
+function getTooltipText(state: string): string {
+    switch (state) {
+        case "online":
+            return _t("presence|online");
+        case "offline":
+            return _t("presence|offline");
+        case "unavailable":
+        case "io.element.unreachable":
+            return _t("presence|away");
+        case BUSY_PRESENCE_NAME.name:
+        case BUSY_PRESENCE_NAME.altName:
+            return _t("presence|busy");
+        default:
+            throw new Error(`Presence state "${state}" is unknown.`);
+    }
+}
+
 const AvatarPresenceIconView: React.FC<Props> = ({ className, presenceState }) => {
     const names = classNames("mx_PresenceIconView", className);
-    return <div className={names}>{getIconForPresenceState(presenceState)}</div>;
+    return (
+        <Tooltip label={getTooltipText(presenceState)} placement="bottom" isTriggerInteractive={false}>
+            <div className={names}>{getIconForPresenceState(presenceState)}</div>
+        </Tooltip>
+    );
 };
 
 export default AvatarPresenceIconView;

apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx

@@ -462,7 +462,7 @@ export default function RoomHeader({
         <>
             <CurrentRightPanelPhaseContextProvider roomId={room.roomId}>
                 <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
-                    <WithPresenceIndicator room={room} size="8px">
+                    <WithPresenceIndicator room={room}>
                         {/* We hide this from the tabIndex list as it is a pointer shortcut and superfluous for a11y */}
                         {/* Disable on-click actions until the room is created */}
                         <RoomAvatar