Show room context details in forward dialog (#7162)

Author: t3chguy

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/Rooms.ts

@@ -18,6 +18,9 @@ import { Room } from "matrix-js-sdk/src/models/room";
 
 import { MatrixClientPeg } from './MatrixClientPeg';
 import AliasCustomisations from './customisations/Alias';
+import DMRoomMap from "./utils/DMRoomMap";
+import SpaceStore from "./stores/spaces/SpaceStore";
+import { _t } from "./languageHandler";
 
 /**
  * Given a room object, return the alias we should use for it,
@@ -80,8 +83,8 @@ export function guessAndSetDMRoom(room: Room, isDirect: boolean): Promise<void>
  * Marks or unmarks the given room as being as a DM room.
  * @param {string} roomId The ID of the room to modify
  * @param {string} userId The user ID of the desired DM
-                   room target user or null to un-mark
-                   this room as a DM room
+ room target user or null to un-mark
+ this room as a DM room
  * @returns {object} A promise
  */
 export async function setDMRoom(roomId: string, userId: string): Promise<void> {
@@ -153,3 +156,22 @@ function guessDMRoomTargetId(room: Room, myUserId: string): string {
     if (oldestUser === undefined) return myUserId;
     return oldestUser.userId;
 }
+
+export function roomContextDetailsText(room: Room): string {
+    if (room.isSpaceRoom()) return undefined;
+
+    const dmPartner = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
+    if (dmPartner) {
+        return room.getMember(dmPartner)?.rawDisplayName;
+    }
+
+    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,
+        });
+    }
+
+    return room.getCanonicalAlias();
+}

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 "../../../Rooms";
 
 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

@@ -396,6 +396,9 @@
     "Failed to invite users to the room:": "Failed to invite users to the room:",
     "We sent the others, but the below people couldn't be invited to <RoomName/>": "We sent the others, but the below people couldn't be invited to <RoomName/>",
     "Some invites couldn't be sent": "Some invites couldn't be sent",
+    "%(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",
     "You need to be logged in.": "You need to be logged in.",
     "You need to be able to invite users to do that.": "You need to be able to invite users to do that.",
     "Unable to create widget.": "Unable to create widget.",