Show room context details in forward dialog

res/css/views/dialogs/_ForwardDialog.scss

@@ -110,18 +110,28 @@ limitations under the License.
                         margin-right: 12px;
                     }
 
-                    .mx_ForwardList_entry_name {
-                        font-size: $font-15px;
+                    .mx_ForwardList_entry_name,
+                    .mx_ForwardList_entry_detail {
                         line-height: 30px;
                         overflow: hidden;
                         white-space: nowrap;
                         text-overflow: ellipsis;
-                        margin-right: 12px;
+                    }
+
+                    .mx_ForwardList_entry_name {
+                        font-size: $font-15px;
+                    }
+
+                    .mx_ForwardList_entry_detail {
+                        font-size: $font-12px;
+                        margin-left: 8px;
+                        color: $tertiary-content;
                     }
                 }
 
                 .mx_ForwardList_sendButton {
                     position: relative;
+                    margin-left: 12px;
 
                     &:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
                         // Hide the "Send" label while preserving button size

src/components/views/dialogs/ForwardDialog.tsx

@@ -44,6 +44,7 @@ import TruncatedList from "../elements/TruncatedList";
 import EntityTile from "../rooms/EntityTile";
 import BaseAvatar from "../avatars/BaseAvatar";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
+import { roomContextDetailsText } from "../../../utils/Room";
 
 const AVATAR_SIZE = 30;
 
@@ -121,6 +122,8 @@ const Entry: React.FC<IEntryProps> = ({ room, event, matrixClient: cli, onFinish
         />;
     }
 
+    const detailsText = roomContextDetailsText(room);
+
     return <div className="mx_ForwardList_entry">
         <AccessibleTooltipButton
             className="mx_ForwardList_roomButton"
@@ -131,6 +134,9 @@ const Entry: React.FC<IEntryProps> = ({ room, event, matrixClient: cli, onFinish
         >
             <DecoratedRoomAvatar room={room} avatarSize={32} />
             <span className="mx_ForwardList_entry_name">{ room.name }</span>
+            { detailsText && <span className="mx_ForwardList_entry_detail">
+                { detailsText }
+            </span> }
         </AccessibleTooltipButton>
         <AccessibleTooltipButton
             kind={sendState === SendState.Failed ? "danger_outline" : "primary_outline"}

src/i18n/strings/en_EN.json

@@ -726,6 +726,9 @@
     "Common names and surnames are easy to guess": "Common names and surnames are easy to guess",
     "Straight rows of keys are easy to guess": "Straight rows of keys are easy to guess",
     "Short keyboard patterns are easy to guess": "Short keyboard patterns are easy to guess",
+    "%(spaceName)s and %(count)s others|other": "%(spaceName)s and %(count)s others",
+    "%(spaceName)s and %(count)s others|zero": "%(spaceName)s",
+    "%(spaceName)s and %(count)s others|one": "%(spaceName)s and %(count)s other",
     "Error upgrading room": "Error upgrading room",
     "Double check that your server supports the room version chosen and try again.": "Double check that your server supports the room version chosen and try again.",
     "Invite to %(spaceName)s": "Invite to %(spaceName)s",

src/utils/Room.ts

@@ -0,0 +1,38 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import SpaceStore from "../stores/spaces/SpaceStore";
+import DMRoomMap from "./DMRoomMap";
+import { _t } from "../languageHandler";
+
+export function roomContextDetailsText(room: Room): string {
+    if (room.isSpaceRoom()) return undefined;
+
+    const dmPartner = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
+    if (dmPartner) {
+        return room.getMember(dmPartner)?.name;
+    }
+
+    const [parent, ...otherParents] = SpaceStore.instance.getKnownParents(room.roomId);
+    if (parent) {
+        return _t("%(spaceName)s and %(count)s others", {
+            spaceName: room.client.getRoom(parent).name,
+            count: otherParents.length,
+        });
+    }
+}