Add an indicator to show a room is a direct chat

Fixes https://github.com/vector-im/riot-web/issues/8797

res/css/views/rooms/_RoomBreadcrumbs.scss

@@ -41,6 +41,12 @@ limitations under the License.
             top: -3px;
             right: -4px;
         }
+
+        .mx_RoomBreadcrumbs_dmIndicator {
+            position: absolute;
+            bottom: 0;
+            right: -4px;
+        }
     }
 
     .mx_RoomBreadcrumbs_animate {

src/components/views/rooms/RoomBreadcrumbs.js

@@ -24,6 +24,8 @@ import classNames from 'classnames';
 import sdk from "../../../index";
 import * as RoomNotifs from '../../../RoomNotifs';
 import * as FormattingUtils from "../../../utils/FormattingUtils";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import {_t} from "../../../languageHandler";
 
 const MAX_ROOMS = 20;
 
@@ -195,6 +197,11 @@ export default class RoomBreadcrumbs extends React.Component {
         this.setState({rooms});
     }
 
+    _isDmRoom(room) {
+        const dmRooms = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
+        return Boolean(dmRooms);
+    }
+
     render() {
         const Tooltip = sdk.getComponent('elements.Tooltip');
         const IndicatorScrollbar = sdk.getComponent('structures.IndicatorScrollbar');
@@ -232,11 +239,23 @@ export default class RoomBreadcrumbs extends React.Component {
                 badge = <div className={badgeClasses}>{r.formattedCount}</div>;
             }
 
+            let dmIndicator;
+            if (this._isDmRoom(r.room)) {
+                dmIndicator = <img
+                    src={require("../../../../res/img/icon_person.svg")}
+                    className="mx_RoomBreadcrumbs_dmIndicator"
+                    width="13"
+                    height="15"
+                    alt={_t("Direct Chat")}
+                />;
+            }
+
             return (
                 <AccessibleButton className={classes} key={r.room.roomId} onClick={() => this._viewRoom(r.room)}
                     onMouseEnter={() => this._onMouseEnter(r.room)} onMouseLeave={() => this._onMouseLeave(r.room)}>
                     <RoomAvatar room={r.room} width={32} height={32} />
                     {badge}
+                    {dmIndicator}
                     {tooltip}
                 </AccessibleButton>
             );

src/i18n/strings/en_EN.json

@@ -760,6 +760,7 @@
     "Seen by %(userName)s at %(dateTime)s": "Seen by %(userName)s at %(dateTime)s",
     "Seen by %(displayName)s (%(userName)s) at %(dateTime)s": "Seen by %(displayName)s (%(userName)s) at %(dateTime)s",
     "Replying": "Replying",
+    "Direct Chat": "Direct Chat",
     "No rooms to show": "No rooms to show",
     "Unnamed room": "Unnamed room",
     "World readable": "World readable",
@@ -1263,7 +1264,6 @@
     "Forget": "Forget",
     "Favourite": "Favourite",
     "Low Priority": "Low Priority",
-    "Direct Chat": "Direct Chat",
     "Clear status": "Clear status",
     "Update status": "Update status",
     "Set status": "Set status",