Implement unreachable state

matrix-org · Oct 13, 2023 · c1b89ed · c1b89ed
1 parent f87cd0f
commit c1b89ed
Show file tree

Hide file tree

Showing 4 changed files with 4,042 additions and 4,039 deletions.
diff --git a/res/css/views/rooms/_EntityTile.pcss b/res/css/views/rooms/_EntityTile.pcss
@@ -46,7 +46,7 @@ limitations under the License.
     background-color: $header-panel-text-primary-color;
 }
 
-.mx_EntityTile .mx_PresenceLabel {
+.mx_EntityTile:not(.mx_EntityTile_unreachable) .mx_PresenceLabel {
     display: none;
 }
 
@@ -106,7 +106,9 @@ limitations under the License.
 }
 
 .mx_EntityTile_unknown .mx_EntityTile_avatar,
-.mx_EntityTile_unknown .mx_EntityTile_name {
+.mx_EntityTile_unknown .mx_EntityTile_name,
+.mx_EntityTile_unreachable .mx_EntityTile_avatar,
+.mx_EntityTile_unreachable .mx_EntityTile_name {
     opacity: 0.25;
 }
 

diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
@@ -35,12 +35,13 @@ const PowerLabel: Record<PowerStatus, TranslationKey> = {
     [PowerStatus.Moderator]: _td("power_level|mod"),
 };
 
-export type PresenceState = "offline" | "online" | "unavailable";
+export type PresenceState = "offline" | "online" | "unreachable" | "unavailable";
 
 const PRESENCE_CLASS: Record<PresenceState, string> = {
     offline: "mx_EntityTile_offline",
     online: "mx_EntityTile_online",
     unavailable: "mx_EntityTile_unavailable",
+    unreachable: "mx_EntityTile_unreachable",
 };
 
 function presenceClassForMember(presenceState?: PresenceState, lastActiveAgo?: number, showPresence?: boolean): string {
@@ -106,6 +107,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
     }
 
     public render(): React.ReactNode {
+        const isPresenceUnreachable = this.props.presenceState === "unreachable";
         const mainClassNames: Record<string, boolean> = {
             mx_EntityTile: true,
             mx_EntityTile_noHover: !!this.props.suppressOnHover,
@@ -121,8 +123,14 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
 
         let nameEl;
         const name = this.props.nameJSX || this.props.name;
-
-        if (!this.props.suppressOnHover) {
+        if (this.props.subtextLabel) {
+            nameEl = (
+                <div className="mx_EntityTile_details">
+                    <div className="mx_EntityTile_name">{name}</div>
+                    <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>
+                </div>
+            );
+        } else if (!this.props.suppressOnHover || isPresenceUnreachable) {
             const activeAgo = this.props.presenceLastActiveAgo
                 ? Date.now() - (this.props.presenceLastTs - this.props.presenceLastActiveAgo)
                 : -1;
@@ -137,22 +145,12 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
                     />
                 );
             }
-            if (this.props.subtextLabel) {
-                presenceLabel = <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>;
-            }
             nameEl = (
                 <div className="mx_EntityTile_details">
                     <div className="mx_EntityTile_name">{name}</div>
                     {presenceLabel}
                 </div>
             );
-        } else if (this.props.subtextLabel) {
-            nameEl = (
-                <div className="mx_EntityTile_details">
-                    <div className="mx_EntityTile_name">{name}</div>
-                    <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>
-                </div>
-            );
         } else {
             nameEl = <div className="mx_EntityTile_name">{name}</div>;
         }

diff --git a/src/components/views/rooms/PresenceLabel.tsx b/src/components/views/rooms/PresenceLabel.tsx
@@ -44,6 +44,8 @@ export default class PresenceLabel extends React.Component<IProps> {
         // the 'active ago' ends up being 0.
         if (presence && BUSY_PRESENCE_NAME.matches(presence)) return _t("presence|busy");
 
+        if (presence === "unreachable") { return _t("presence|unreachable"); }
+
         if (!currentlyActive && activeAgo !== undefined && activeAgo > 0) {
             const duration = formatDuration(activeAgo);
             if (presence === "online") return _t("presence|online_for", { duration: duration });